最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
用css3实现的图片头像扫光高亮特效
时间:2015-01-28 编辑:简简单单 来源:一聚教程网
这个扫光的效果,大致实现思路:用css3伪类添加一扫光层,背景白色,透明度看个人喜好设置;现用transform:rotate()旋转45度,剩下的就是控制层的位置啦!
这 里要说明的是:不间断的扫光效果,最终是通过css3的animate去实现的,animate属性可以设置动画的延时时间,但却不可以设置每一次重复扫 光的间隔时间。变通的处理方法是:将扫光层的left,top 位置值设置离层本身的距离够大,延长每次扫光的时间,从而实现“间隔一定时间重复扫光”的效果。
当然层本身是要加overflow:hidden属性的,这样扫光的效果才会显得更加逼真!!
css3实现图片头像扫光高亮效果,源码:
代码如下 | 复制代码 |
吐槽下:网上有很多css3的demo,效果很绚丽,但一般都是一大段的代码,没任何注释说明,理解起来比较费时间,这是件很蛋疼的事情。
相关文章
- CSS3中的lowpoly可以实现任意一图片的动画效果 05-16
- CSS3滤镜实现图片不同渲染效果例子 05-09
- CSS3实现图片折角效果例子 05-29
- 用CSS3实现图片倒影教程 12-23
- css3实现图片滑过发光效果 12-07
- CSS 鼠标点击拖拽效果代码展示 10-31