栏目分类:
子分类:
返回
终身学习网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
终身学习网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

慕课网的图片闪光滑过效果

CSS教程 更新时间:发布时间: 百科书网 趣学号

今天在等响应式实战发布时,注意到实战页面的图片,鼠标经过会有闪光滑过的效果。我觉得挺有趣,照葫芦画瓢写了个demo。

有兴趣的同学可以写个demo玩一下,实现原理很简单: 只需要为创建效果的元素添加一个伪元素做为动画层,元素相对定位, 伪元素绝对定位,这样就可以调整伪元素的大小啦,调整成一个长方形,再用transform调整到合适的角度,left设置成负值让伪元素“隐藏”起来。
下一步就是用 linear-gradient给伪元素做一个透明——白色——透明的渐变背景,再为元素添加:hover 伪类, 鼠标经过时更改一下伪元素的 left和transition值就大功告成啦。

略有遗憾的是,由于transform属性的原因,这个效果在ie上要10+版本才能正常显示,做为一个增强效果,即使浏览器不支持情况下也无伤大雅。

转载请注明:文章转载自 www.051e.com
本文地址:http://www.051e.com/it/243492.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号