                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3图片动态提示效果

分享最后2个作业的源码，希望能帮助不会的同学

<figure class="test5">
<img src="005.jpg">
<figcaption>
<h2>图片标题</h2>
<p>斜角动画</p>
<div></div>
</figcaption>
</figure>

<figure class="test6">
<img src="006.jpg">
<figcaption>
<h2>图片标题</h2>
<p>线性动画</p>
<div class="line1"></div>
<div class="line2"></div>
</figcaption>
</figure>

.test5{ background:#000;}
.test5 figcaption{ width:100%; height:100%;}
.test5 figcaption div{ background: #fff; width:130%; height:100%; position:absolute; transform:translate(0,350px) rotate(0deg); transform-origin:0 0; opacity:0.5;}
.test5:hover figcaption div{transform:translate(0,350px) rotate(-15deg); opacity:0.9;}
.test5:hover img{opacity:0.5;transform:translate(0,-10px);}
.test5 figcaption h2{margin:15% 0 0 10%; transform:translate(0,50px); opacity:0; position:absolute;}
.test5 figcaption p{ margin:60% 0 0 80%; transform:translate(0,50px); opacity:0; color:#000; position:absolute; z-index:9999;}
.test5:hover figcaption h2{ transform:translate(0,0); opacity:1; transition-delay:0.2s;}
.test5:hover figcaption p{ transform:translate(0,0); opacity:1; transition-delay:0.3s;}

.test6{background:#000;}
.test6 figcaption{ width:100%; height:100%;}
.test6 figcaption div.line1{ border-left:1px solid #fff;  border-right:1px solid #fff; width:80%; height:90%; left:10%; top:5%; position:absolute; transform:scale(1,0); opacity:0;}
.test6 figcaption div.line2{ border-top:1px solid #fff;  border-bottom:1px solid #fff; width:90%; height:80%; left:5%; top:10%; position:absolute; transform:scale(0,1); opacity:0;}
.test6:hover figcaption div.line1{transform:scale(1,1); opacity:1;}
.test6:hover figcaption div.line2{transform:scale(1,1); opacity:1;}
.test6 figcaption h2{ margin:15% 0 0 15%; transform:scale(0.8,0.8); opacity:0;}
.test6 figcaption p{ margin:2% 0 0 15%; transform:scale(0.8,0.8); opacity:0;}
.test6:hover figcaption h2{transform:scale(1,1); opacity:1;transition-delay:0.2s;}
.test6:hover figcaption p{ transform:scale(1,1); opacity:1; transition-delay:0.3s;}
.test6 img{ transform:scale(1.1,1.1); opacity:1;}
.test6:hover img{ transform:scale(1,1); opacity:0.5;}