使用css写一个红绿灯交替的动画效果
薛浩言
本文向大家介绍使用css写一个红绿灯交替的动画效果相关面试题，主要包含被问及使用css写一个红绿灯交替的动画效果时的应答技巧和注意事项，需要的朋友参考一下
<title>Document</title> <style> .box{ margin: 0 auto; width: 80px; border-radius: 40px; border: 3px solid #333; background-color: #333; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .light{ width: 50px; height: 50px; border-radius: 50%; margin: 10px 0; background: #000; opacity: .1; } .red{ background: #ff0000; animation: 12s red infinite; } .yellow{ background: #ffff00; animation: 12s yellow infinite; } .green{ background: #31da38; animation: 12s green infinite; } @Keyframes red{ 0%{opacity: 1;} 30%{opacity: 1;} 33%{opacity: .1;} } @Keyframes yellow{ 0%{opacity: .1;} 33%{opacity: .1;} 36%{opacity: 1;} 63%{opacity: 1;} 66%{opacity: .1;} } @Keyframes green{ 0%{opacity: .1;} 66%{opacity: .1;} 69%{opacity: 1;} 97%{opacity: 1;} 100%{opacity: .1;} } </style>
类似资料：
-
本文向大家介绍请用js编写一个红绿灯程序相关面试题，主要包含被问及请用js编写一个红绿灯程序时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍请手写一个幻灯片的效果相关面试题，主要包含被问及请手写一个幻灯片的效果时的应答技巧和注意事项，需要的朋友参考一下 使用css3 动画就可以，预览地址：https://codepen.io/ansonznl/pen/KLyJjX
-
本文向大家介绍请用css写一个扫码的加载动画图相关面试题，主要包含被问及请用css写一个扫码的加载动画图时的应答技巧和注意事项，需要的朋友参考一下 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donut { display: inline-block;
-
本文向大家介绍使用css实现霓虹灯效果相关面试题，主要包含被问及使用css实现霓虹灯效果时的应答技巧和注意事项，需要的朋友参考一下 https://github.com/censek/HTML5-CSS3-demos/tree/master/%E9%9C%93%E8%99%B9%E6%96%87%E6%9C%AC
-
本文向大家介绍使用css写一个水平翻转文字的效果相关面试题，主要包含被问及使用css写一个水平翻转文字的效果时的应答技巧和注意事项，需要的朋友参考一下
-
AnyLogic提供基于时间触发的传统交通灯。我正在创建一个新的道路交通管理系统，我想根据四条道路中最大的车辆密度触发交通灯。是否有任何功能或元素可以帮助我这样做？