javascript - 利用图片制作灯光渐变效果,IE支持。怎么做?
阿神
阿神 2017-04-11 09:42:35
0
0
360

问题描述:

想利用图片做一个类似灯光渐变的效果:
现阶段有不同颜色的图片(如下图),然后更改他们的透明度实现渐变效果。

自己的实现方法:

我目前使用的是CSS3的动画,更改background-image和opacity来实现的。但是IE和火狐并不支持background-image属性的动画效果(其实只有chrome支持)。
因为需要渐变效果,也就是在yellow->red的时候,会有橙色的过度(该效果是通过两张图片的叠加实现的。也就是(
yellow 1 1->1 1->0
red 0 0->1 1->1

这是一个从yellow->red的过程。
求各位大神给的思路或者想法?
实现代码如下:

/* for Chrome*/ #colorBar{ position: absolute; /*float: left;*/ z-index: 15; background-repeat: no-repeat; background-size: cover; width: 100%; opacity: 1; animation: colorImg 8s steps(40) infinite ; /*animation: colorImg 15s infinite;*/ } @keyframes colorImg{ 0%{ background-image: url("../img/LED/yellow.png"); opacity:1; } 25%{ background-image: url("../img/LED/red.png"); opacity:1; } 50%{ background-image: url("../img/LED/green.png"); opacity:1; } 75%{ background-image: url("../img/LED/blue.png"); opacity:1; } 100%{ background-image: url("../img/LED/yellow.png"); opacity:1; } }

图片材料:

阿神
阿神

闭关修行中......

reply all (0)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!