CSS动画之——盒子背景的交替循环

最新推荐文章于 2023-10-17 17:20:03 发布
最新推荐文章于 2023-10-17 17:20:03 发布
阅读量410 收藏 1
点赞数
分类专栏： # html js css 特效 动画 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40629521/article/details/131596241
版权
文章介绍了如何使用定时器和CSS实现网页上一组盒子的背景颜色循环变化的效果。通过在Vue中设置DOM节点，结合CSS样式和JavaScript代码，每两秒钟改变一个盒子的背景颜色，同时调整相应的小条透明度，从而达到平滑过渡的视觉效果。
摘要由CSDN通过智能技术生成

还是在做官网的过程中遇到的动画效果 盒子的背景会循环改变。记录一下

首先看看效果

请添加图片描述

这种效果是怎么实现的呢。其实不算是很难，原理就是依附定时器 每一秒去改变当前选中的背景颜色就好了。

<div class="about-img">
  <div ref="aboutImg1">
    <p>XX1</p>
  </div>
  <div ref="aboutImg2">
    <p>XX2</p>
  </div>
  <div ref="aboutImg3">
    <p>XX3</p>
  </div>
  <div ref="aboutImg4">
    <p>XX4</p>
  </div
最低0.47元/天 解锁文章
故人偏爱云腴白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css背景动画_多个背景CSS动画
culuo8053的博客
08-02 284
css背景动画CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements. I was recently asked if it was possible to have mult...
Animated-Background:HTML CSS动画背景
05-05
动画背景 部署@ 使用HTML，动画图标和CSS的动画背景
css动画及背景设置
qq_20623665的博客
04-09 904
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。当我设置延迟时间 为0.75s时,因为延迟时元素初始状态为可见,出现问题。设置文字的高度间距--如果和盒子高度相同,实现文字居中。3向4位置 x轴回到起始点0 y移动100%此时就需要加上--元素样式为动画定义0%的样式。2向3位置 x轴为100% y移动75vh。1向2位置 x轴移动100% y移动0。可以创建多边形内容显示区域polygon。设置文字之间纵向的间距。1初始x y 为0 0。
CSS技巧：实现背景动画
m0_47883103的博客
09-17 1090
关键点 当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影 box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画） background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的 <div class="shadow"></div> <div class="gradient"></div> .shadow { po
CSS实现炫酷动画背景
m0_61643133的博客
11-13 2670
因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。
CSS第十天学习总结—— CSS3 动画
weixin_52819925的博客
08-01 238
动画 animation 动画（animation）是CSS3中具有颠覆性的特征之一， 可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 初学者容易对 动画 和 过渡 傻傻分不清楚 过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px 动画 可以设置变化的次数 甚至是无数次 步骤 制作动画分为两步： 在css中定义动画函数 @keyframes：关键帧 给
CSS知识
weixin_50535031的博客
09-25 196
CSS: 层叠样式表/级联样式表1995年诞生，2010年推出了CSS3样式：颜色、背景、位置、大小、边框、阴影、动画…总结：CSS用于控制HTML标签样式。
自己学习html+css的详细笔记
qq_53366282的博客
05-18 1790
目录 常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13
CSS3
m0_47966287的博客
01-05 241
属性选择器 属性选择器 解释说明 E[attr] 查找指定拥有attr属性的E标签，如查找拥有style的li标签——li[style] E[attr=value] 查找拥有指定的attr属性并且属性值为value的E标签 E[attr*=value] 查找拥有指定的attr的属性并且属性值也包含（可以在任意位置）value的E标签 E[attr^=value] 查找拥有指定attr属性并且属性值以value开头的E标签 E[attr$=value] 查找拥有指定的attr属
CSS动画实现背景无缝无限循环的实现示例
12-28
1. 需求 一张图片从左向右无限循环移动 2. 代码 由于是应用在移动端，故使用rem单位，后面问题也发生在这。 HTML <div class=dog></div> CSS .dog { width: 5.4rem; \\图片宽度 height: 3.04rem; \\图片高度 background-image: url(head.jpg); background-size: 5.4rem 3.04rem; \\图片宽高 background-position:
jQuery 实现两个div颜色互换的动画
12-30
jQuery 实现两个div颜色互换的动画
CSS3动画，变形及背景
weixin_46221319的博客
03-07 597
动画 animation-name: 要对当前元素生效的关键帧的名字 animation-name: test; animation-duration: 动画的执行时间 animation-duration: 4s; animation-delay:动画的延时 animation-delay: 2s; nimation-iteration-count 动画执行的次数 可选值： 次数 infinite 无限执行 animation-iteration-count: 1; anima
【每日一练】21—CSS实现炫酷动画背景
web前端开发
07-06 701
今天分享的这个小练习，我们在视频号上分享过，具体效果请看下面的视频：因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。HTML代码：<!doctype html> <html> <head> <title>【每日一练】21—CSS实现炫酷动画背景&...
css背景渐变和动画
最新发布
爱意迷了眼丶的博客
10-17 623
【代码】css背景渐变和动画。
用CSS+JS控制Li背景颜色交替VIEW:704
twosecond
07-03 743
懒人图库.l1{background:#ffffff}.l2{background:#f4f4f4}function initUl(){var a=document.getElementsByTagName(ul);for (var i=0;i  var v=document.getElementsByTagName(li);  var ii=1;  for (var j=0;j    i
纯CSS实现列表颜色循环变化，多少个都可以实现，用css循环一组（4个）颜色（背景颜色）
qq_39695210的博客
02-09 1713
纯CSS实现列表颜色循环变化，多少个都可以实现，用css循环一组（4个）颜色（背景颜色）
CSS3实现渐变背景动画特效
明哥
03-21 2272
效果图： 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变背景动画</title> <style> body{ height: 100vh; width: 100vw; margin:
CSS两面盒子翻转
jin_ba_dao的博客
12-07 586
CSS两面盒子翻转动画 首先在给一个大盒子里面包含两个盒子 <div class="box"> <div class="front">好好学习</div> <div class="back">天天向上</div> </div> CSS body { /*设置元素被查看位置的视图,看着给合适的值*/ perspective: 400px; } .box {
css点击盒子背景颜色动画
05-15
CSS 点击盒子背景颜色动画可以通过使用 CSS 的伪类选择器和过渡属性来实现。首先需要给要设置动画的盒子添加一个背景颜色，然后使用伪类选择器 `:hover` 选择该盒子，当鼠标悬停在盒子上时，对应的样式就会应用到该盒子上。 在伪类中，通过设置 `transition` 属性来实现动画效果，它可以让 CSS 属性在一定时间内平滑过渡。比如，我们可以将 `background-color` 属性的过渡时间设置为 0.5 秒，这样鼠标悬停在盒子上时，背景颜色就会平滑地从原来的颜色逐渐变成新的颜色，创建出一种点击盒子背景颜色动画的效果。 以下是该效果的示例代码： ```html <div class="box"></div> ``` ```css .box { width: 200px; height: 200px; background-color: #f00; transition: background-color 0.5s ease; } .box:hover { background-color: #00f; } ``` 在上述示例中，我们定义了一个名为 `.box` 的 class，它表示一个 200 x 200 像素的盒子，并设置了它的背景颜色为红色。接着，我们定义了一个 `.box:hover` 选择器，当鼠标悬停在盒子上时，它将把盒子的背景颜色从红色过渡到蓝色，过渡时间为 0.5 秒。 总之，CSS 点击盒子背景颜色动画是一种常见的交互效果，通过使用伪类选择器和过渡属性，可以轻松实现该效果，使页面更加动态和生动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值