这篇博客介绍了如何使用CSS3实现一个交互效果：当鼠标经过图片时，图片上会出现一道倾斜的闪光划过。通过设置特定的cursor样式和CSS3动画，可以增强用户体验。
<style>
#img{width:205px;height: 242px;margin:50px auto;position: relative;overflow: hidden;}
#img:hover:before{ transition: left 0.7s;/*过渡,改变闪光的位置*/ left: 300px; }
#img:before{/*插入闪光*/
content: '';
position: absolute;
width: 30px;
height: 277px;
top: 0;
left: -100px;
background-image: linear-gradient(to right,rgba(255,255,255,0.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient渐变效果*/
#img{width:205px;height: 242px;margin:50px auto;position: relative;overflow: hidden;}
#img:hover:before{ transition: left 0.7s;/*过渡,改变闪光的位置*/ left: 300px; }
#img:before{/*插入闪光*/
content: '';
position: absolute;
width: 30px;
height: 277px;
top: 0;
left: -100px;
background-image: linear-gradient(to right,rgba(255,255,255,0.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient渐变效果*/
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
