图片动画-旋转
css:
body, figure, figcaption {
margin: 0;
padding: 0;
}
figure {
position: relative;
width: 33.33%;
height: 350px;
overflow: hidden;
float: left;
}
figcaption {
position: absolute;
top: 0px;
left: 0px;
color: #fff;
font-family: "微软雅黑";
}
figure img {
opacity: 0.9;
transition: all 0.35s;
}
figure figcaption p, h2, span, div {
transition: all 0.35s;
}
.test2 {
background: #000;
}
.test2 figcaption {
width: 100%;
height: 100%;
}
.test2 figcaption h2 {
margin-top: 15%;
margin-left: 15%;
}
.test2 figcaption p {
margin-left: 15%;
opacity: 0;
transform: translate(0px,20px);
}
.test2 figcaption div {
border: 2px solid #FFF;
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
transform: translate(0px,-350px) rotate(0deg);
}
.test2:hover figcaption div {
transform: translate(0px,0px) rotate(360deg);
}
.test2:hover img {
opacity: 0.5;
}
.test2:hover figcaption p {
opacity: 1;
transform: translate(0px,0px);
}
Body:
<figure class="test2">
<img src="phto/73C58PIC8uq_1024.jpg" />
<figcaption>
<h2>图片标题</h2>
<p>图片注解</p>
<div></div>
</figcaption>
</figure>