当前位置:首页 » 站长资讯 » CSS3怎么给背景图片添加动态变色效果

CSS3怎么给背景图片添加动态变色效果

原创 admin 54°c 2021年08月24日 16:49 站长资讯 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

1.gif

下面我们来研究一下是怎么实现这个效果的:


首先我们不创建标签,直接在body标签上设置背景图片


body {    background-image: url("https://img.php.cn/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%), 

此时这个还是静态效果,怎么实现不断变色的动态效果?我们可以利用@keyframes和animation属性来实现–添加动画效果:


利用animation属性设置动画名称、播放时间、播放次数等:

body {   background-image: url("https://img.php.cn/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:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。


animation-play-state:指定动画是否正在运行或已暂停。


利用@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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/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.php.cn/upload/article/000/000/024/612360451cede816.jpg");   } }  body {    background-image: url("https://img.php.cn/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>

欢迎阅读本文,希望本文对您有所帮助!

本文链接:https://www.1110wang.com/post/167.html

版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

本文标签:

评论(0) 红包雨

广告位

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读

什么是小米广告EMI平台?

发布 : | 分类 : 站长资讯 | 评论 : 0人 | 浏览 : 13次

什么是EMI平台?小米效果营销竞价平台”EMI”是小米推出的效果广告投放系统,以MIUI系统为核心,基于小米应用商店、小米视频、小米浏览器、新闻资讯、小米音乐等海量广告资源,给广告主提供丰富多样广告形式,并利用小米大数据分析实现品效合一的投放平台。 ...

标签 :

百度贴吧上线视频号

发布 : | 分类 : 站长资讯 | 评论 : 0人 | 浏览 : 25次

作为一名不合格的SEO,每天的工作自然和这几大互联网巨头有所接触,不过接触最多的还是度娘。用什么方法可以使度娘主动为你搔首弄姿,这就得八仙过海,各显神通了。短视频,好像是从WIFI覆盖的时候,就逐渐走入了众人的视野。随着字节跳动旗下抖音的推波助澜,火遍大江南北,于是各大互联网巨头纷纷跳入海中与之搏斗。譬如:腾讯系微信的视频号,阿里巴巴好像没什么小视频(如果你知道,请留言告知),百度有百度好看,但是好看是长视频,对标的是腾讯视频,爱奇艺这类领域。...

标签 :