现在网页中流行的css3样式

转载于 2014-10-08 14:20:00 发布 · 60 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/goodbeypeterpan/p/4011105.html

本文分享了三种鼠标互动特效的实现方式：圆形图片变方形、菜单或图片移动、图片旋转，通过CSS过渡属性（transition）来达到平滑变化的效果。每种特效都附有关键代码，帮助开发者快速应用到自己的项目中。

1、鼠标放在圆形图片中，图片渐渐的变方形【17素材头像的特效，觉得不错就研究下来了 ———— 17sucai.com】

img{border-radius:50%;transition: all .4s ease-out；}

a:hover img{border-radius:0px；}

2、当鼠标放到菜单或者图片上时，菜单或图片会渐渐的移动  【忘记在哪看的了，不过效果确实很不错】

a{transition:all 0.3s ease-out 0s;color:#000;}

a:hover{margin-left:5px; text-decoration:none;}

3、当鼠标放到图片上，图片会旋转一定的角度，【类似天猫首页右侧的便民服务，其实原理就是相同的背景图片】

i{       background: url(../images/lobg.png) no-repeat; width:30px; height:30px;}

i:hover{       background-position: 0 -30px;      transition: all .4s ease-out;}