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;
}
.test3 {
background: #000;
}
.test3 figcaption {
top: 30%;
left: 40%;
}
.test3:hover img {
opacity: 0.5;
}
.test3 figcaption h2 {
transform: skew(90deg);
}
.test3:hover figcaption h2 {
transform: skew(0deg);
}
.test3 figcaption p {
transform: skew(90deg);
transition-delay: 0.2s;
}
.test3:hover figcaption p {
transform: skew(0deg);
}
Body:
<figure class="test3">
<img src="phto/u=159389783,3102223341&fm=214&gp=0.jpg" />
<figcaption>
<h2>倾斜动画</h2>
<p>图片倾斜动画注解</p>
</figcaption>
</figure>