為什么我在做第三個動畫的時候，最后的一張圖會被前面的兩個圖影響！
//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>旋轉(zhuǎn)動畫</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);
}
2015-10-22
是把他擠掉了 導致格局坍塌了