                        课程
                    
                        /前端开发
                        
                            /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;}

明哥就是神

2015-08-25

源自：CSS3图片动态提示效果 4-1

关注问题我要回答

1442

操作

收起

11 回答

apple2008
2015-08-27

谢谢分享。

0 回复有任何疑惑可以回复我~

收起回答

慕侠8077504
2018-12-28

谢谢666

0 回复有任何疑惑可以回复我~

收起回答

qq_市井小民_03174192
2016-05-05

是不是浏览器不兼容的问题，前四个效果都可以显示

0 回复有任何疑惑可以回复我~

收起回答

qq_市井小民_03174192
2016-05-05

为什么粘贴复制过后没效果呢

0 回复有任何疑惑可以回复我~

收起回答

彭乐愚
2016-04-24

素材下载地址http://pan.baidu.com/s/1geCHPvl

0 回复有任何疑惑可以回复我~

收起回答

Honghong1223
2015-10-23

很棒喔！如果把井字格动画那再微微调下就更好看了：

.test6:hover figcaption .line1{transform:scale(1,-1);opacity:1;}

.test6:hover figcaption .line2{transform:scale(-1,1);opacity:1;}

0 回复有任何疑惑可以回复我~

收起回答

qq_赤木花开_0
2015-10-11

为什么我写的test5切面中文字不是黑色，而是透明的呢？

0 回复有任何疑惑可以回复我~

收起回答

明哥就是神提问者

你要给文字的P标签写一个z-index: 9999;

2015-10-15 回复有任何疑惑可以回复我~

渡今日_
2015-09-24

.test5{
    background: #dd9fac;
}
.test5 figcaption{
    width: 100%;
    height: 100%;
}
.test5 figcaption h2{
    margin-top: 15%;
    margin-left: 15%;
    position: absolute;
    opacity: 0;
    transform: translate(0,50px);
    -webkit-transform: translate(0,50px);
}
.test5 figcaption p{
    overflow: hidden;
    color: #000;
    font-weight: bold;
    /*margin:80% 10% 0 60%;*/
    position: absolute;
    transform: translate(0,70px);
    -webkit-transform: translate(0,70px);
    margin-top: 80%;
    margin-left: 60%;
    margin-right: 10%;
    z-index: 9999;
}
.test5 figcaption div{
    width: 150%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    -webkit-transform-origin:0 0;
    transform:translate(0,30px) rotate(0deg) ;
    -webkit-transform:translate(0,350px) rotate(0deg);
}
.test5:hover figcaption div{
    transform:translate(0,350px) rotate(-20deg);
    -webkit-transform:translate(0,350px) rotate(-20deg);
}
.test5:hover figcaption h2{
    transform: translate(0,0px);
    -webkit-transform: translate(0,0px);
    opacity: 1;
}
.test5:hover img{
    opacity: 0.5;
}
.test5:hover figcaption p{
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}

0 回复有任何疑惑可以回复我~

收起回答

渡今日_
2015-09-24

楼主有尝试过使用两个P标签吗？就是test5这个，我这里只要使用两个P标签就会重叠在一起……怎么弄都不好

0 回复有任何疑惑可以回复我~

收起回答

明哥就是神提问者

如果是2个P标签的话你其实你看到的不是重叠，而是另外一个P标签直接被隐藏了，请注意你P标签的CSS中有这样3个样式：margin-top: 80%;margin-left: 60%;margin-right: 10%;你想想当第二个p标签继承第一个p标签的样式后，还能换一行显示吗？所以你的换行写法应该是<p>鲁滨逊造型<br/>123</p>，供你参考！

2015-09-29 回复有任何疑惑可以回复我~