鼠标划过图片向上移动 6个效果都在里面，只有第6个有问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>css3-html5</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="css/one.css" rel="stylesheet"> </head> <body> <figure class="test1"> <img src="images/cap-pic1.jpg" /> <figcaption> <h1>图片标题</h1> <p>我是第一张图片</p> <p>我是第一张图片</p> <p>我是第一张图片</p> </figcaption> </figure> <figure class="test2"> <img src="images/cap-pic6.jpg" /> <figcaption> <h1>图片标题</h1> <p>我是第一张图片</p> <div></div> </figcaption> </figure> <figure class="test3"> <img src="images/ec-pic1.jpg" /> <figcaption> <h1>图片标题</h1> <p>我是第一张图片</p> </figcaption> </figure> <figure class="test4"> <img src="images/ec-pic6.jpg" /> <figcaption> <h1>图片标题</h1> <p>我是第一张图片</p> <div class="num1"></div> <div class="num2"></div> </figcaption> </figure> <figure class="test5"> <img src="images/hol-pic2.jpg" /> <figcaption> <h1>图片标题</h1> <p>我是第一张图片</p> <div></div> </figcaption> </figure> <figure class="test6"> <img src="images/ec-pic1.jpg" /> <figcaption> <h1>图片标题</h1> <p>我是第一张图片</p> <div></div> </figcaption> </figure> </body> </html>
@charset "utf-8";
/*css Document*/
body,figure,figcaption,img,h1,p{
margin: 0; padding: 0;
}
figure{width: 33.33%; height: 300px; overflow: hidden; float: left; position: relative; }
figure img{width: 100%;height: 100%; display: block; opacity:0.8; transition: all 0.5s;}
figcaption{ position:absolute;top:0; left: 0; color: #fff; font-family: "微软雅黑";}
figure figcaption p,h1,span,div{transition: all 0.35s;}
@media only screen and (max-width:600px) {
figure{width: 100%;}
}
@media screen and (min-width:601px)and (max-width:1200px){
figure{width: 50%;}
}
@media only screen and (min-width:1201px ) {
figure{width: 33.33%;}
}
.test1{background: #2F0000;}
.test1 figcaption{padding: 20px;}
.test1 figcaption p{
background: #fff; color: #333; text-align: center; margin: 5px 0 0 5px;
transform: translate(-150px,0);
}
.test1:hover figcaption p{
transform: translate(0,0);
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;
}
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.1s;
}
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;
}
.test1:hover img{transform: translate(-50px,0); opacity: 0.5;}
/*旋转动画*/
.test2{background: #030;}
.test2 figcaption{width: 100%; height: 100%;}
.test2 figcaption h1{margin: 15% 0 0 15%;}
.test2 figcaption p{margin-left: 15%; transform: translate(0px,50px); opacity: 0;}
.test2 figcaption div{
width: 80%; height: 80%; border: 2px solid #FFFFFF;
position: absolute; top:10%; left: 10%; transform: translate(0px,-300px) rotate(0deg);
}
.test2:hover figcaption div{transform: translate(0px,0px) rotate(360deg);}
.test2:hover img{opacity: 0.5;}
.test2:hover figcaption p{transform: translate(0px,0px); opacity: 1;}
/*斜切动画*/
.test3{background: #000;}
.test3:hover img{opacity: 0.5;}
.test3 figcaption{top:30%; left: 15%;}
.test3 figcaption h1{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg); transition-delay: 0.2s;}
.test3:hover figcaption h1{transform: skew(0deg);}
.test3:hover figcaption p{transform: skew(0deg); transition-delay: 0.2s;}
/*双线动画*/
.test4{background: #333333;}
.test4:hover img{opacity: 0.5;}
.test4 figcaption{width: 100%; height: 100%;}
.test4 figcaption .num1{width: 80%; height: 60%;border-top: 2px solid #0F0;border-bottom: 2px solid #0F0; position: absolute;top:20%;
left: 10%; transform: translate(-650px,0px);
}
.test4 figcaption .num2{width: 60%; height: 80%; border-left: 2px solid #0F0; border-right: 2px solid #0F0; position: absolute;top:10%;
left: 20%; transform: translate(0px,300px);}
.test4:hover figcaption .num1{transform: translate(0px,0px);}
.test4:hover figcaption .num2{transform: translate(0px,0px); transition-delay:0.2s;}
/*缩放动画*/
.test5{background: #030;}
.test5 figcaption{width: 100%; height: 100%;}
.test5 figcaption h1{margin: 25% 0 0 35%;}
.test5 figcaption p{margin-left: 35%;margin-top: 5px;}
.test5 figcaption div{
width: 70%; height: 70%; border: 2px solid #FFFFFF;
position: absolute; top:15%; left: 15%; transform: scale(1.2,1.2);
}
.test5:hover figcaption div{
transform: scale(1,1);
}
.test5:hover figcaption h1,.test5:hover figcaption p{transform: scale(1.2,1.2); transition-delay: 0.2s;}
.test5:hover img{opacity: 0.5; transform: scale(1.2,1.2);}
/*一张图斜切*/
.test6{background: #000; position: relative;}
.test6 figcaption{width: 100%; height: 100%;}
.test6:hover img{opacity: 0.5;}
.test6 figcaption div{
width: 100%; height: 70%; background: #FFFFFF; opacity: 0;
position: absolute; top:0%; left: 0%;
}
.test6:hover figcaption div{
transform: rotate(-20deg);
transform-origin:0% 0%;
-ms-transform: rotate(-20deg); /* IE 9 */
-ms-transform-origin:0% 0%; /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari and Chrome */
-webkit-transform-origin:0% 0%; /* Safari and Chrome */
-moz-transform: rotate(-20deg); /* Firefox */
-moz-transform-origin:0% 0%; /* Firefox */
-o-transform: rotate(-20deg); /* Opera */
-o-transform-origin:0% 0%; /* Opera */
opacity: 0.5;
}
慕勒49715461回答
-
Lemon156
这是一个定位的问题，你改一下这三个地方就可以了，望采纳
随时随地看视频慕课网APP
相关分类
CSS3