作者： | 来源：互联网 | 2023-09-11 15:49
页面效果大概是：五个小图标，点击后触发target飞入一张背景图，五张背景图都是叠加在页面中铺满的，所以层级关系显示最后一张图，为了切换过程中还能看到上一张图被覆盖，而不是看到叠加的最后一张
页面效果大概是：五个小图标，点击后触发target飞入一张背景图，五张背景图都是叠加在页面中铺满的，所以层级关系显示最后一张图，为了切换 过程中 还能看到上一张图被覆盖，而不是看到叠加的最后一张图被覆盖，有人加了一个not target实现了这个效果。。但是不明白为什么其他四张图都是not target从100变到75，但是却不是显示叠加的最后一张图。。我不知道形容的清楚了么。。。我认为关键性的部分代码如下所示，求解释。。。
.all #pic1:target{
1
2
| animation:toright 1s linear 0s;
z-index:100;} |
.all img:not(:target){
1
| animation:not 1s linear 0s;} |
@keyframes toright{
1
2
3
4
5
| from{
transform:translateX(-2000px)}
to{
transform:translateX(0)}
} |
@keyframes not{
1
2
3
4
5
| from{
z-index:100;}
to{
z-index:75;}
} |
=======================下面是全文代码============================
京公网安备 11010802041100号