CSS实现背景颜色循环播放效果

简介: 颜色的循环播放效果应该如何去实现呢,细想下来,其实不需要用什么高端的技术,只需要使用css基本的animation动画效果就可以办得到,网上也有很多例子,接下来我们来看看这其中是如何实现吧。

颜色的循环播放效果?女朋友说想要一个页面,页面上可以进行一个颜色轮换效果,还特地嘱咐说要弄一个比较柔和的效果,不能太艳丽,叭叭叭叭叭,比起五彩斑斓的黑也差不到哪里去了。


既然有人提出了需求,那么为了不分手,我这就只能去乖乖的研究一下了,莫生气。

面对如此的需求,就只能做一件事,那就是把所有的细节点全部忘掉,先弄一个页面给她看看,让她自己改,不然就算写出个花来,那也是白给呀。


那我们应该是如何去实现呢,细想下来,其实不需要用什么高端的技术,只需要使用css基本的animation动画效果就可以办得到,网上也有很多例子,接下来我们来看看这其中是如何实现吧。


animation的属性大概分为这几个,

animation: colorswitch 20s infinite;


我们来看这段css代码,如下代码:

colorswitch(animation-name): 选择器的 keyframe 名称,看一下就行


@keyframes colorswitch {
  0% {
    background: #0087C9
  }
  16% {
    background: #EF4A53
  }
  32% {
    background: #FFB463
  }
  49% {
    background: #33D5D4
  }
  65% {
    background: #254356
  }
  81% {
    background: #5B4097
  }
  100% {
    background: #0087C9
  }
}

(animation-duration): 颜色变换的周期时间;

(animation-timing-function): 动画的速度曲线;

(animation-delay): 动画开始之前的延迟;

infinite(animation-iteration-count): 播放动画的次数,可以是数值,也可以是infinite(无限次);

(animation-direction): 是否应该轮流反向播放动画;(normal (默认值)   |  alternate (反向))


大家也可以在我的GitHub上面直接下载,链接在这


目录
相关文章
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
248 4
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
350 1
|
前端开发
CSS中颜色的定义
CSS中颜色的定义
201 0
|
9天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
29 0
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
496 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
前端开发
css 渐变效果,这颜色 666 !
css 渐变效果,这颜色 666 !
|
前端开发 开发者
CSS颜色表示:探索预定义名称、RGB、HEX、HSL、RGBA和HSLA
CSS颜色表示:探索预定义名称、RGB、HEX、HSL、RGBA和HSLA
296 6
|
前端开发 安全
CSS基础常用属性之颜色(如果想知道CSS的颜色知识点,那么只看这一篇就足够了!)
CSS基础常用属性之颜色(如果想知道CSS的颜色知识点,那么只看这一篇就足够了!)
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
332 6

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式