利用css3制作的几个loading图
先看图，多数是从别人那里看的效果直接仿的，先开随笔，有了创意继续加
其实3个之后，脑子里立刻有个第四个的制作思路，无外乎是利用border或者块元素变形，然后构思好接下来的行为，写起来也非常简单，5个一共用了半个小时左右，缺的还是思路啊
代码如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>仅在chrome下正常显示</title> <style> *{ margin:0; padding:0;} .css_content{ width:300px; height:300px; float:left; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; border:1px solid #ccc; } /* NO.1 */ .loading1{ width:100px; height:100px; margin:50px; border:10px solid #ccc; border-left-color:#000; border-radius:50%; -webkit-animation: loading1 1s linear infinite; } @-webkit-keyframes loading1{ to { -webkit-transform:rotate(1turn)}; } /* NO.2 */ .loading2{ width:150px; height:50px; text-align:center;} .loading2 span{ display:inline-block; width:6px; height:100%; background:green; -webkit-animation: loading2 1.2s infinite ease-in-out ; } /* 下面的样式，如果不加上.loading2 则不生效 */ .loading2 .line2{ -webkit-animation-delay:-1.1s; } .loading2 .line3{ -webkit-animation-delay:-1.0s; } .loading2 .line4{ -webkit-animation-delay:-0.9s; } .loading2 .line5{ -webkit-animation-delay:-0.8s; } @-webkit-keyframes loading2{ 0%,40%,100%{ -webkit-transform:scaleY(.4); } 20%{ -webkit-transform:scaleY(1); } } /* loading3 */ .loading3{ width:50px; height:50px; border:2px solid #666; border-radius:50%; border-left-color:transparent; border-right-color:transparent; -webkit-animation:loading3 2s infinite; } @-webkit-keyframes loading3{ 0% { -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(360deg); } 100% { -webkit-transform:rotate(0deg); } } /* loading4 */ .loading4{ width:200px; height:40px; font-family:"微软雅黑"; text-align:center;} .loading4 span{ display:inline-block; -webkit-animation:loading4 1.4s infinite ease-in-out; } .loading4 .str1{ -webkit-animation-delay:-1.3s;} .loading4 .str2{ -webkit-animation-delay:-1.2s;} .loading4 .str3{ -webkit-animation-delay:-1.1s;} .loading4 .str4{ -webkit-animation-delay:-1.0s;} .loading4 .str5{ -webkit-animation-delay:-.9s;} .loading4 .str6{ -webkit-animation-delay:-.8s;} .loading4 .str7{ -webkit-animation-delay:-.7s;} @-webkit-keyframes loading4{ 0%,40%,100% { -webkit-transform:translateY(0px); } 20% { -webkit-transform:translateY(-20px); } } /* N0.5 */ .loading5{ width:50px; height:50px; position:relative; -webkit-animation:loading5 1.5s linear infinite;} .loading5 span{ position:absolute; left:50%; top:50%; width:3px; height:10px; display:block; -webkit-transform-origin:center -8px;} .loading5 .b1{ -webkit-transform:translate(-50%,8px) rotate(-45deg); background-color:#000;} .loading5 .b2{ -webkit-transform:translate(-50%,8px) rotate(-90deg); background-color:#222;} .loading5 .b3{ -webkit-transform:translate(-50%,8px) rotate(-135deg); background-color:#444;} .loading5 .b4{ -webkit-transform:translate(-50%,8px) rotate(-180deg); background-color:#666;} .loading5 .b5{ -webkit-transform:translate(-50%,8px) rotate(-225deg); background-color:#888;} .loading5 .b6{ -webkit-transform:translate(-50%,8px) rotate(-270deg); background-color:#aaa;} .loading5 .b7{ -webkit-transform:translate(-50%,8px) rotate(-315deg); background-color:#ccc;} .loading5 .b8{ -webkit-transform:translate(-50%,8px) rotate(-360deg); background-color:#eee;} @-webkit-keyframes loading5{ to{ -webkit-transform:rotate(1turn); } } </style> </head> <body> <!-- NO.1 --> <div class="css_content"> <div class="loading1"></div> </div> <!-- NO.2 --> <div class="css_content" style="background-color:#333;"> <div class="loading2"> <span class="line1"></span> <span class="line2"></span> <span class="line3"></span> <span class="line4"></span> <span class="line5"></span> </div> </div> <!-- NO.3 --> <div class="css_content" style="background-color:#FFEC73;"> <div class="loading3"></div> </div> <!-- NO.4 --> <div class="css_content"> <div class="loading4"> <span class="str1">L</span> <span class="str2">o</span> <span class="str3">a</span> <span class="str4">d</span> <span class="str5">i</span> <span class="str6">n</span> <span class="str7">g</span> </div> </div> <!-- NO.5 --> <div class="css_content"> <div class="loading5"> <span class="b1"></span> <span class="b2"></span> <span class="b3"></span> <span class="b4"></span> <span class="b5"></span> <span class="b6"></span> <span class="b7"></span> <span class="b8"></span> </div> </div> </body> </html>
