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

CSS3动画实现红绿灯相关推荐

html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...
css3动画之——动态的省略号
css3动画之--动态的省略号今天学习了CSS3动画,涉及到的属性:@keyframes,animation,animation-duration,animation-name,animation- ...
一个栗子上手CSS3动画
最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往 MDN 在开始栗子前,我们先补补基础知识. css3动画 ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...

CSS3动画实现红绿灯

CSS3动画实现红绿灯效果

使用CSS3的动画效果

CSS3动画实现红绿灯相关推荐

最新文章

热门文章