本文主要是介绍CSS3 循环跳跃起伏的竖线（类似于语音助手动画），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
根据CSS3 写一个类似于语音助手动画的 ，那种上下不停起伏的效果
源码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>语音助手</title><style type="text/css">@keyframes yuying1{0%{height: 0%;}20%{height: 50%;}50%{height: 100%;}80%{height: 50%;}100%{height: 0%;}} #container{width: 200px;height: 50px;margin: 200px auto; }#container #one{animation:yuying1 0.6s infinite 0.1s;-webkit-animation:yuying1 0.6s infinite 0.1s;}#container #two{animation:yuying1 0.6s infinite 0.2s;-webkit-animation:yuying1 0.6s infinite 0.2s;}#container #three{animation:yuying1 0.6s infinite 0.3s;-webkit-animation:yuying1 0.6s infinite 0.3s;}#container #four{animation:yuying1 0.6s infinite 0.4s;-webkit-animation:yuying1 0.6s infinite 0.4s;}#container #five{animation:yuying1 0.6s infinite 0.5s;-webkit-animation:yuying1 0.6s infinite 0.5s;}#one,#two,#three,#four,#five{width:6px;height: 100%;margin-left: 10px;border-radius: 50px;background-color: #999;vertical-align: middle;display: inline-block;}</style></head><body><div id="container"><div id="one"></div><div id="two"></div><div id="three"></div><div id="four"></div><div id="five"></div></div></body>
</html>
这篇关于CSS3 循环跳跃起伏的竖线（类似于语音助手动画）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
