当前位置:天才代写 > tutorial > 网页教程 > 用CSS3线性渐变制作闪光划过效果

用CSS3线性渐变制作闪光划过效果

2018-05-17 08:00 星期四 所属: 网页教程 浏览:378

 闪光划过的效果曾经出现在早期版本的百度音乐上,当鼠标移上图片的时候,会有一道闪光在图片上划过。这种效果运用得当可以让你的产品看起来更加炫酷,特别是服装、汽车等高端品牌的展示应用。

效果图

  该效果在css3诞生之前,需要通过较复杂的javascript来实现,而且光效不预先制作成图片的话,处理起来也相当麻烦。但对于CSS3来说这都是小菜一碟。

  把图片存放在html所在目录的images文件夹下,命名为pic.jpg,然后就可以开始编写基础的html代码了。

基础代码

  该代码在页面上放置了一个图片和一个class=light的div,由于light内部没有任何内容,而且未设置样式,所以运行将只在页面左上角显示你的图片。

  然后,图片和light有重叠,因此内部必须使用绝对定位,而包裹它们的overimg则需要设置为相对定位。

图片和light有重叠效果

  下面我们给light层设置样式,其宽高跟图片相等。

  闪光说白了就是一个从中间不透明到两侧透明的渐变,利用CSS3的linear-gradient即可轻松实现。

     代码如下:

实现从中间不透明到两侧透明的代码

  两行background的不同前缀用于兼容不同的浏览器。

  background除了支持纯色和图片以外,还支持渐变填充,我们来看看这句代码。

  -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));

  我们看到了括号内第一个参数为0deg,它表示旋转0度,也就是不旋转,所以渐变的方向是默认的从左到右。

  后面是3个颜色值,分别是不透明度0%的白色,不透明度50%的白色和不透明度0%的白色,所以出来的效果是白色从中间慢慢地向两侧淡出。

      效果如下图所示:

设置透明度后效果

  根据人类肉眼的视觉感受规律,观察的方向一般是从左上到右下,所以,把这道光倾斜适当角度会让效果更加自然。

  倾斜可以利用transform中的skewx/skewy来实现,具体代码如下:

倾斜光的代码

  再次运行,效果如下图所示:

把光倾斜后效果图

  现在,就差划过的动画了,我们希望它从左到右划过,所以,一开始整道光应该在图片的左边界以左。

光的放置位置示意

  很显然,它应该在当前位置的基础上进行左移,具体数值等于图片的宽度180,因此left等于-180px

改变位置代码

  然后鼠标移过的时候,闪光就要跑到右边界以后,不难推断,这时候的left应该等于180px。

      我们把这个值写到hover伪类上:

把值写到hover伪类上

  再次运行,看不到闪光了,但鼠标移到图片上也一样没有啊。为什么呢?

  从代码可知,移上前和移上后,闪到的位置都在图片的可视范围以外,所以肯定是看不到闪光了。

  而要实现位置的平滑过渡,方法自然就是利用CSS3非常强大的transition属性来完成任务了。

平滑过渡代码

  4个属性的功能一致,都代表让两个状态在0.5秒呢内完成平滑过渡。不同前缀用于兼容不同的浏览器。

  再次运行,我们发现好像还是没效果啊。

#p#分页标题#e#

  想想,light在-180的位置,我们鼠标能触碰到么?所以我们要改改hover的对象,直接用外层的overimg来做鼠标滑过动作,此处我们使用后代选择器,让鼠标移到overimg时,其内层的light发生属性的更改。

过渡代码

  注意,添加该样式后记得删除.light:hover的样式,以防冲突。

  再次运行,鼠标移到图片上,闪光的效果就出来了。鼠标移出图片,闪光效果就会倒着播,从右往左滑动。

最终效果图

  该效果简单实用,如果你感觉自己设计的网站比较单调,缺乏动感的话,就尝试加入这样的效果吧,一般都能有明显的改善。在此,小编推荐大家收藏本文,在你需要灵感的时候,这篇教程也许就刚好帮到你了。

 

    关键字:

天才代写-代写联系方式