css加载动画（纯css和html）
从jq官网上摘抄下来的一个简单加载动画，个人比较喜欢使用~存在这里，作为记录
话不多说~上代码
DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> /* 登陆动画 */
.loader { width: 90px; height: 42px; position: absolute; top: 50%; left: 50%; transform: translate(-50%); }
#logining { /* display: none; */ width: 447px; height: 438px; /* background-color: rgba(255, 255, 255, 0.3); */ position: relative; top: 0; left: 0; text-align: center; font-size: 24px; color: #cccccc; background: rgba(4, 49, 75, 0.7); overflow: hidden; }
#logining p { margin-top: 150px; }
.css-square { position: absolute; top: 0; left: 0; width: 25px; height: 7px; background: #cccccc; box-shadow: 2px 2px 3px 0px black; }
.square1 { left: 70px; -webkit-animation: dominos 1s 0.125s ease infinite; animation: dominos 1s 0.125s ease infinite; }
.square2 { left: 60px; -webkit-animation: dominos 1s 0.3s ease infinite; animation: dominos 1s 0.3s ease infinite; }
.square3 { left: 50px; -webkit-animation: dominos 1s 0.425s ease infinite; animation: dominos 1s 0.425s ease infinite; }
.square4 { left: 40px; -webkit-animation: dominos 1s 0.540s ease infinite; animation: dominos 1s 0.540s ease infinite; }
.square5 { left: 30px; -webkit-animation: dominos 1s 0.665s ease infinite; animation: dominos 1s 0.665s ease infinite; }
.square6 { left: 20px; -webkit-animation: dominos 1s 0.79s ease infinite; animation: dominos 1s 0.79s ease infinite; }
.square7 { left: 10px; -webkit-animation: dominos 1s 0.9s ease infinite; animation: dominos 1s 0.9s ease infinite; }
.square8 { left: 0px; -webkit-animation: dominos 1s 1s ease infinite; animation: dominos 1s 1s ease infinite; }
@-webkit-keyframes loader-1-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes loader-1-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes dominos { 50% { opacity: 0.7; }
75% { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
80% { opacity: 1; } }
@keyframes dominos { 50% { opacity: 0.7; }
75% { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
80% { opacity: 1; } } style> head>
<body> <div id="logining"> <p>加载中...p> <section> <div class="loader "> <div class="css-square square1">div> <div class="css-square square2">div> <div class="css-square square3">div> <div class="css-square square4">div> <div class="css-square square5">div> <div class="css-square square6">div> <div class="css-square square7">div> <div class="css-square square8">div> div> section> div> body>
html>