这是当鼠标移入会在原来的层上显示另一个层的动画,我这个页面里有很多项都需要用这个效果,之前我想用js来实现这个效果,不过弹出来的层的位置不好固定,特别是页面里有太多这个效果,而最麻烦的还是当窗口缩小时弹出的层会乱飘,后来我使用css3动画来实现,不仅在切换间很流畅有一些酷炫的动画效果,而且代码很简洁。
1. 首先在一个.container-detailed的盒子里建两个盒子,这两个盒子就是用来切换显示和隐藏的。
<div class="container-detailed">
<div class="hover-hidden1">
<img src="images/csdn-2.png" class="img-circle" width="280px" height="280px">
</div>
<div class="hover-show1">
<p>某某某 | 安卓开发</p>
<p>爱好:骑骑单车