CSS3动画实现红绿灯

最新推荐文章于 2022-05-05 22:42:31 发布

qq_1715

最新推荐文章于 2022-05-05 22:42:31 发布

阅读量719

点赞数

文章标签： css3 javascript

本文链接：https://blog.csdn.net/qq_44617099/article/details/115096550

版权

CSS3动画实现红绿灯效果

题目：实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景颜色

使用CSS3的动画效果

思路：一共是3+1+2=6秒，分给每个颜色显示的百分比为red：33% yellow：17% green：50%

优点：可以实现过渡效果

缺点：对秒数的把控不是很严格，没有完全实现3s 1s 2s

<style>
  #box {
    width: 100px;
    height: 100px;
    /* background-color: red; */
    border-radius: 50%;
  }
  @keyframes deng {
    0% {
      background-color: red;
    }

    33% {
      background-color: yellow;
    }

    50% {
      background-color: green;
    }
    100% {
      background-color: green;
    }

  }

  #box {
    animation: deng 6s linear infinite;
  }
</style>

<body>
  <div id="box"></div>
</body>

另外还可以用setTimeout 或者Promise 或者async await实现

具体参考另一位大佬的博客https://blog.csdn.net/latency_cheng/article/details/88660742

qq_1715

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画实现红绿灯

CSS3动画实现红绿灯效果题目：实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景颜色使用CSS3的动画效果思路：一共是3+1+2=6秒，分给每个颜色显示的百分比为red：33% yellow：17% green：50%优点：可以实现过渡效果缺点：对秒数的把控不是很严格，没有完全实现3s 1s 2s<style> #box { width: 100px; height: 100px; /* bac
复制链接

扫一扫