在线研究代码点

今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点效果一、效果二、效果三，下载收藏点这里，效果预览点这里。

效果1

效果1的html文件

[html] view plaincopy

1. <div class="pic">  
2.     <img src="pic.jpg" alt="">  
3.     <span>这里是个标题呀</span>  
4. </div>  

css文件中我们主要实现定位和hover动画。

[css] view plaincopy

1. /* 图片盒子的样式，宽高、边框、阴影、位置、鼠标样式、溢出 */  
2. .pic{  
3.     width: 500px;  
4.     height: 500px;  
5.     border: 10px solid #333;  
6.     box-shadow: 0 0 10px rgba(0,0,0,.6);  
7.     margin: 50px auto;  
8.     position: relative;  
9.     overflow: hidden;  
10.     cursor: pointer;  
11. }  
12. /* 图片标题的样式，宽高、背景色、水平垂直居中、定位，透明度 */  
13. .pic span{  
14.     position: absolute;  
15.     left: 0;  
16.     bottom: 0;  
17.     width: 500px;  
18.     height: 50px;  
19.     background: rgba(0,0,0,.5);  
20.     color: #fff;  
21.     font-size: 24px;  
22.     line-height: 50px;  
23.     text-align: center;  
24.     opacity: 0;  
25. }  
26. /* 给需要动画的元素加过渡属性 */  
27. .pic img,.pic span{  
28.     transition: all .5s;  
29. }  
30. /* hover之后透明动画 */  
31. .pic:hover span{  
32.     opacity: 1;  
33. }  
34. /* hover之后图片放大的效果 */  
35. .pic:hover img{  
36.     transform: scale(2);  
37. }  

效果2

下面看效果2，上下滑动打开的实现过程。首先看html文件，我们需要两个图片元素，一个显示上半部分，一个显示下半部分。

[html] view plaincopy

1. <div class="pic">  
2.     <img class="top" src="pic.jpg" alt="top">  
3.     <img class="bottom" src="pic.jpg" alt="bottom">  
4.     <span>OK,You can see it.</span>  
5. </div>  

css文件如下，我们把实现原理写到注释里，就不一一解释了。

[css] view plaincopy

1. /* 图像盒子的样式设置，宽高、边框、阴影、溢出、位置 */  
2. div.pic{  
3.     width: 500px;  
4.     height: 500px;  
5.     cursor: pointer;  
6.     margin: 50px auto;  
7.     position: relative;  
8.     overflow: hidden;  
9.     border: 10px solid #333;  
10.     box-shadow: 0 0 10px rgba(0,0,0,.8);  
11. }  
12. /* 上下两半部分的统一设置，绝对定位和过渡 */  
13. div.pic img{  
14.     position: absolute;  
15.     left: 0;  
16.     transition: all 1s;  
17. }  
18. /* 上半部分图像的裁剪和定位 */  
19. div.pic img.top{  
20.     top: 0;  
21.     clip: rect(0px,500px,250px,0px);  
22. }  
23. /* 下半部分图像的裁剪和定位 */  
24. div.pic img.bottom{  
25.     bottom: 0;  
26.     clip: rect(250px,500px,500px,0px);  
27. }  
28. /* hover之后图像的定位改变 */  
29. div.pic:hover img.top{  
30.     top: -50px;  
31. }  
32. div.pic:hover img.bottom{  
33.     bottom: -50px;  
34. }  
35. /* 图像标题的样式设置，文字颜色、水平居中、垂直居中 */  
36. div.pic span{  
37.     display: inline-block;；  
38.     width: 100%;  
39.     text-align: center;  
40.     line-height: 500px;  
41.     font-size: 24px;  
42. }