页面效果大概是：五个小图标，点击后触发target飞入一张背景图，五张背景图都是叠加在页面中铺满的，所以层级关系显示最后一张图，为了切换 过程中 还能看到上一张图被覆盖，而不是看到叠加的最后一张图被覆盖，有人加了一个not target实现了这个效果。。但是不明白为什么其他四张图都是not target从100变到75，但是却不是显示叠加的最后一张图。。我不知道形容的清楚了么。。。我认为关键性的部分代码如下所示，求解释。。。
.all #pic1:target{
animation:toright 1s linear 0s;
z-index:100;}
.all img:not(:target){
animation:not 1s linear 0s;}
@keyframes toright{
from{
transform:translateX(-2000px)}
to{
transform:translateX(0)}
}
@keyframes not{
from{
z-index:100;}
to{
z-index:75;}
}
=======================下面是全文代码============================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;}
ul{
list-style:none;}
img{
display:block;}
html,body{
height:100%;}
.all{
width:100%;
height:100%;
position:relative;
overflow:hidden;}
.all img{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;}
.all ul{
position:fixed;
z-index:101;
bottom:100px;
width:100%;
height:200px;
text-align:center;}
.all ul li{
width:200px;
height:100px;
padding-top:100px;
background:#ff0;
margin-right:20px;
display:inline-block;
border:2px solid #fff;
text-shadow:-3px -3px 2px #666;
font-size:22px;
color:#fff;
font-weight:bold;
border-radius:10px;
position:relative;}
.all ul li:nth-child(1){
background:#02646e;}
.all ul li:nth-child(2){
background:#eb0837;}
.all ul li:nth-child(3){
background:#67b374;}
.all ul li:nth-child(4){
background:#e6674a;}
.all ul li:nth-child(5){
background:#e61061;}
.all ul li a{
color:#fff;
text-decoration:none;
font-family:'Yesteryear', cursive;}
.all ul li a::before{
content:"";
display:block;
width:145px;
height:145px;
border-radius:50%;
border:5px solid #fff;
position:absolute;
top:-75px;
left:25px;}
.all ul li a::after{
content:"";
display:block;
width:145px;
height:145px;
border-radius:50%;
background:rgba(0,0,0,.4);
position:absolute;
top:-70px;
left:30px;}
.all ul li:nth-child(1) a::before{
background:url(images/sbg1.jpg) no-repeat center;}
.all ul li:nth-child(2) a::before{
background:url(images/sbg2.jpg) no-repeat center;}
.all ul li:nth-child(3) a::before{
background:url(images/sbg3.jpg) no-repeat center;}
.all ul li:nth-child(4) a::before{
background:url(images/sbg4.jpg) no-repeat center;}
.all ul li:nth-child(5) a::before{
background:url(images/sbg5.jpg) no-repeat center;}
.all ul li a:hover::after{
content:"";
background:rgba(153,204,102,0)}
@keyframes toright{
from{
transform:translateX(-2000px)}
to{
transform:translateX(0)}
}
@keyframes totop{
from{
transform:translateY(2000px)}
to{
transform:translateY(0)}
}
@keyframes tobig{
from{
transform: scale(0)}
to{
transform: scale(1)}
}
@keyframes tosmall{
from{
transform: scale(2)}
to{
transform: scale(1)}
}
@keyframes toscale{
from{
transform: rotate(0) scale(0)}
to{
transform: rotate(360deg) scale(1)}
}
@keyframes not{
from{
z-index:100;}
to{
z-index:75;}
}
.all #pic1:target{
animation:toright 1s linear 0s;
z-index:100;}
.all #pic2:target{
animation:totop 1s linear 0s;
z-index:100;}
.all #pic3:target{
animation:tobig 1s linear 0s;
z-index:100;}
.all #pic4:target{
animation:tosmall 1s linear 0s;
z-index:100;}
.all #pic5:target{
animation:toscale 1s linear 0s;
z-index:100;}
.all img:not(:target){
animation:not 1s linear 0s;}
</style>
</head>
<body>
<div class="all">
<ul>
<li><a href="#pic1">Hipster Fashion Haircut</a></li>
<li><a href="#pic2">Cloud Computing Services </a></li>
<li><a href="#pic3">Cloud Computing Services </a></li>
<li><a href="#pic4">Cloud Computing Services </a></li>
<li><a href="#pic5">Lips so kissable I could </a></li>
</ul>
<img src="images/bg1.jpg" id="pic1" />
<img src="images/bg2.jpg" id="pic2" />
<img src="images/bg3.jpg" id="pic3" />
<img src="images/bg4.jpg" id="pic4" />
<img src="images/bg5.jpg" id="pic5" />
</div>
</body>
</html>
