[加载动画一]纯css3实现的加载动画,拿走即用
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-01-17 20:29:47
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>赵克立博客_网络编程-http://www.zhaokeli.com</title> <meta name="keywords" content="" /> <meta name="description" content="描述" /> </head> <body> <style type="text/css"> @-webkit-keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .ball-scale-multiple { position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; } .ball-scale-multiple > div:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .ball-scale-multiple > div:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .ball-scale-multiple > div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; left: 0px; top: 0px; opacity: 0; margin: 0; width: 60px; height: 60px; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite; } .loaddh { position: fixed; top: 50%; left: 50%; width: 100px; height: 100px; background: rgba(0, 0, 0, .8); margin-left: -50px; margin-top: -50px; border-radius: 10px; } </style> <!-- 页头 --> <div class="loaddh"> <div class="loader-inner ball-scale-multiple"> <div></div> <div></div> <div></div> </div> </div> </body> </html>