当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下。
大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。
同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。
HTML 如下:
CSS 为:
作者:狐灵科技 | 2019-12-29 17:11 |点击:
当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下。
大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。
同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。
HTML 如下:
CSS 为: