脚本宝典收集整理的这篇文章主要介绍了CSS3怎么给背景图片添加动态变色效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。在之前的文章《利用CSS3创建炫酷的三角背景图像》中,我们给大家介绍了一种创建炫酷三角背景图像的方法,感兴趣的朋友可以去了解一下~
而下面本文再给大家介绍一种创建炫酷背景图像方法,带大家了解一下如何利用CSS3创建变色背景图像动画,让你的网页更吸引人!
我们先来看看效果图
下面我们来研究一下是怎么实现这个效果的:
首先我们不创建标签,直接在body标签上设置背景图片
body { background-image: url("https://img.js-code.COM/upload/article/000/000/024/612360451cede816.jpg"); background-size: cover; background-rePEat: no-repeat; background-attachment: fixed; background-posITion: center; }
怎么将图片变色呢?这就需要在背景图片上添加一个颜色层作为覆盖层,这个可以利用linear-gradient()函数实现:
background-image: linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg");
此时这个还是静态效果,怎么实现不断变色的动态效果?我们可以利用@keyframes和animation属性来实现--添加动画效果:
利用animation属性设置动画名称、播放时间、播放次数等:
body { background-image: url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); background-Size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; animation-name: background-overlay-animation; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; }
animation-name:指定要绑定到选择器的关键帧的名称
animation-duration:动画指定需要多少秒或毫秒完成
animation-timing-function:设置动画将如何完成一个周期
animation-delay:设置动画在启动前的延迟间隔。
animation-iteration-count:定义动画的播放次数。
animation-direction:指定是否应该轮流反向播放动画。
animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
利用@keyframes定义每一帧动画:
@keyframes background-overlay-animation { 0% { background-image: linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 25% { background-image: linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 50% { background-image: linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 100% { background-image: linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } }
下面给出完整代码:
<!DOCTYPE htML> <html> <head> <meta charset="utf-8"> <style> @keyframes background-overlay-animation { 0% { background-image: linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 25% { background-image: linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 50% { background-image: linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 100% { background-image: linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } } @-webkit-keyframes background-overlay-animation { /* 兼容谷歌浏览器*/ 0% { background-image: linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%) url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 25% { background-image: linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 50% { background-image: linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } 100% { background-image: linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%), url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); } } body { background-image: url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; animation-name: background-overlay-animation; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } </style> </head> <body> <!-- 你的内容放在这里 --> </body> </html>
PHP中文网平台有非常多的视频教学资源,欢迎大家学习《css视频教程》!
以上就是CSS3怎么给背景图片添加动态变色效果的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的CSS3怎么给背景图片添加动态变色效果全部内容,希望文章能够帮你解决CSS3怎么给背景图片添加动态变色效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。