css3 loading 效果1
生活随笔
收集整理的這篇文章主要介紹了
css3 loading 效果1
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
代碼：
<!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://www.cnblogs.com/baixc/p/4430311.html
總結
以上是生活随笔為你收集整理的css3 loading 效果1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据结构(Java)——查找和排序（1）
- 下一篇： 完整的node脚手架搭建服务