代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{position: relative;margin: 100px;} #box span{display: block;width: 9px;height: 5px;position: absolute;bottom: 0;background-color: #9b59b6;-webkit-animation:preloader 1.0s infinite ease-in-out; } #box span:nth-child(2){left: 11px;-webkit-animation-delay:0.2s;} #box span:nth-child(3){left: 22px;-webkit-animation-delay:0.4s;} #box span:nth-child(4){left: 33px;-webkit-animation-delay:0.6s;} #box span:nth-child(5){left: 44px;-webkit-animation-delay:0.8s;} @-webkit-keyframes preloader{0%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}25%{height: 35px;transform:translateY(15px);background-color: #3498db;}50%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}100%{height: 5px;transform:translateY(0px);background-color: #9b59b6;} } </style> </head> <body><div id="box"><span></span><span></span><span></span><span></span><span></span></div> </body> </html>
效果图：
![[傅里叶变换及其应用学习笔记] 九. 继续卷积的讨论](https://images2015.cnblogs.com/blog/421096/201512/421096-20151202224648596-1656708802.png)
