[加载动画二]纯css3实现的加载动画,拿走即用
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-01-17 20:29:58
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<!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-pulse-sync { 33% { -webkit-transform: translateY(10px); transform: translateY(10px); } 66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes ball-pulse-sync { 33% { -webkit-transform: translateY(10px); transform: translateY(10px); } 66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .ball-pulse-sync > div:nth-child(0) { -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(1) { -webkit-animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(2) { -webkit-animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(3) { -webkit-animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out; } .ball-pulse-sync > div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; } .ball-pulse-sync { position: absolute; top: 50%; left: 50%; margin-left: -37px; margin-top: -11px; } .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-pulse-sync"> <div></div> <div></div> <div></div> </div> </div> </body> </html>