为什么我在做第三个动画的时候，最后的一张图会被前面的两个图影响！
//HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS动效</title>
<link href = "../style/animate.css" rel = "stylesheet"/>
</head>
<body>
<figure>
<figcaption>
<h2>高渐离ADN雪女</h2>
<p class = "img1-p1 img1-p">图片描述</p>
<p class = "img1-p2 img1-p">图片描述</p>
<p class = "img2-p3 img1-p">图片描述</p>
</figcaption>
</figure>
<figure>
<figcaption>
<h2>旋转动画</h2>
<p>飞来飞去，飞来飞走</p>
<div></div>
</figcaption>
</figure>
<figure>
<figcaption>
<h2>斜切动画</h2>
<p>飞来飞去，飞来飞走</p>
</figcaption>
</figure>
</body>
</html>
//css代码
* {
margin: 0;
padding: 0;
}
.img1, .img2, .img3 {
width: 33.33%;
height: 300px;
float: left;
position: relative;
}
.img1 {
background: url(../img/img6.jpg);
background-size: 550px 300px;
background-repeat: no-repeat;
background-position: -20px 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
opacity: 1;
filter: alpha(opacity=100);
}
.img1:hover figcaption p {
transform: translate(0, 0);
}
.img1:hover {
opacity: 0.9;
filter: alpha(opacity=90);
background-position: -60px 0;
}
.img1 figcaption {
position: absolute;
top: 30px;
left: 30px;
color: #fff;
}
.img1 figcaption p {
margin-top: 5px;
-webkit-transform: translate(-120px, 0);
-moz-transform: translate(-120px, 0);
-o-transform: translate(-120px, 0);
-ms-transform: translate(-120px, 0);
transform: translate(-120px, 0);
transition: all 0.3s;
}
.img1 figcaption p:nth-of-type(1) {
transition-delay: 0.05s;
}
.img1 figcaption p:nth-of-type(2) {
transition-delay: 0.12s;
}
.img1 figcaption p:nth-of-type(3) {
transition-delay: 0.2s;
}
.img2 {
background: url(../img/img10.jpg);
background-size: 550px 300px;
background-repeat: no-repeat;
background-position: -20px 0;
}
.img2:hover div {
transform: rotate(360deg);
top: 40px;
}
.img2:hover p {
top: 100px;
opacity: 1;
}
.img2 div {
position: absolute;
left: 60px;
top: -220px;
width: 300px;
height: 200px;
border: 2px solid #fff;
transition: all 0.5s;
}
.img2 h2 {
position: absolute;
top: 60px;
left: 80px;
}
.img2 p {
position: absolute;
top: 200px;
left: 80px;
color: #fff;
opacity: 0;
transition: all 0.5s;
}
.img3 {
background: url(../img/img7.jpg);
background-size: 550px 300px;
background-repeat: no-repeat;
background-position: -20px 0;
overflow: hidden;
}
.img3 h2 {
position: absolute;
top: 60px;
left: 80px;
color: #fff;
}
.img3 p {
position: absolute;
top: 100px;
left: 80px;
color: #fff;
transition: all 0.5s;
transform: skew(90deg);
}
.img3:hover p {
transform: skew(0deg);
}
