前言
今天水一篇文章 说起来 我已经差不多一个月没更新文章了吧
主要还是不知道更新啥！！！
教程开始
第一步：
新建一个 loading 样式 css
将以下代码放进去 然后引用这个文件
#Loadanimation<span class="token token-operator punctuation">{</span> <span class="token keyword">background</span>-color<span class="token punctuation">:</span>#fff; height<span class="token punctuation">:</span><span class="token number">100</span>%; <span class="token keyword">width</span><span class="token punctuation">:</span><span class="token number">100</span>%; <span class="token keyword">position</span><span class="token punctuation">:</span>fixed; <span class="token keyword">z</span>-index<span class="token punctuation">:</span><span class="token number">1</span>; <span class="token keyword">margin</span>-top<span class="token punctuation">:</span>0px;top<span class="token punctuation">:</span>0px; <span class="token token-operator punctuation">}</span> #Loadanimation<span class="token token-operator punctuation">-</span>center<span class="token token-operator punctuation">{</span> <span class="token keyword">width</span><span class="token punctuation">:</span><span class="token number">100</span>%; height<span class="token punctuation">:</span><span class="token number">100</span>%; <span class="token keyword">position</span><span class="token punctuation">:</span>relative; <span class="token token-operator punctuation">}</span> #Loadanimation<span class="token token-operator punctuation">-</span>center<span class="token token-operator punctuation">-</span>absolute<span class="token token-operator punctuation">{</span> <span class="token keyword">position</span><span class="token punctuation">:</span>absolute; <span class="token keyword">left</span><span class="token punctuation">:</span><span class="token number">50</span>%; top<span class="token punctuation">:</span><span class="token number">50</span>%; height<span class="token punctuation">:</span>200px; <span class="token keyword">width</span><span class="token punctuation">:</span>200px; <span class="token keyword">margin</span>-top<span class="token punctuation">:</span>-100px; <span class="token keyword">margin</span>-left<span class="token punctuation">:</span>-100px; <span class="token token-operator punctuation">}</span> <span class="token punctuation">.</span>xccx_object<span class="token token-operator punctuation">{</span> -moz<span class="token token-operator punctuation">-</span>border<span class="token token-operator punctuation">-</span>radius<span class="token punctuation">:</span><span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>%; -webkit<span class="token token-operator punctuation">-</span>border<span class="token token-operator punctuation">-</span>radius<span class="token punctuation">:</span><span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>%; border<span class="token token-operator punctuation">-</span>radius<span class="token punctuation">:</span><span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>%; <span class="token keyword">position</span><span class="token punctuation">:</span>absolute; border<span class="token token-operator punctuation">-</span>left<span class="token punctuation">:</span>5px solid #87CEFA; border<span class="token token-operator punctuation">-</span>right<span class="token punctuation">:</span>5px solid #FFC0CB; border<span class="token token-operator punctuation">-</span>top<span class="token punctuation">:</span>5px solid transparent; border<span class="token token-operator punctuation">-</span>bottom<span class="token punctuation">:</span>5px solid transparent; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token punctuation">:</span>animate <span class="token number">2</span><span class="token punctuation">.</span>5s infinite; animation<span class="token punctuation">:</span>animate <span class="token number">2</span><span class="token punctuation">.</span>5s infinite; <span class="token token-operator punctuation">}</span> #xccx_one<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>75px; top<span class="token punctuation">:</span>75px; <span class="token keyword">width</span><span class="token punctuation">:</span>50px; height<span class="token punctuation">:</span>50px; <span class="token token-operator punctuation">}</span> #xccx_two<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>65px; top<span class="token punctuation">:</span>65px; <span class="token keyword">width</span><span class="token punctuation">:</span>70px; height<span class="token punctuation">:</span>70px; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>1s; animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>1s; <span class="token token-operator punctuation">}</span> #xccx_three<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>55px; top<span class="token punctuation">:</span>55px; <span class="token keyword">width</span><span class="token punctuation">:</span>90px; height<span class="token punctuation">:</span>90px; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>2s;animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>2s; <span class="token token-operator punctuation">}</span> #xccx_four<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>45px; top<span class="token punctuation">:</span>45px; <span class="token keyword">width</span><span class="token punctuation">:</span>110px; height<span class="token punctuation">:</span>110px; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>3s; animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>3s; <span class="token token-operator punctuation">}</span> @-webkit<span class="token token-operator punctuation">-</span>keyframes animate<span class="token token-operator punctuation">{</span><span class="token number">50</span>%<span class="token token-operator punctuation">{</span> -ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token number">100</span>%<span class="token token-operator punctuation">{</span>-ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token token-operator punctuation">}</span> @keyframes animate<span class="token token-operator punctuation">{</span><span class="token number">50</span>%<span class="token token-operator punctuation">{</span> -ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token number">100</span>%<span class="token token-operator punctuation">{</span> -ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token token-operator punctuation">}</span>#Loadanimation<span class="token token-operator punctuation">{</span> <span class="token keyword">background</span>-color<span class="token punctuation">:</span>#fff; height<span class="token punctuation">:</span><span class="token number">100</span>%; <span class="token keyword">width</span><span class="token punctuation">:</span><span class="token number">100</span>%; <span class="token keyword">position</span><span class="token punctuation">:</span>fixed; <span class="token keyword">z</span>-index<span class="token punctuation">:</span><span class="token number">1</span>; <span class="token keyword">margin</span>-top<span class="token punctuation">:</span>0px;top<span class="token punctuation">:</span>0px; <span class="token token-operator punctuation">}</span> #Loadanimation<span class="token token-operator punctuation">-</span>center<span class="token token-operator punctuation">{</span> <span class="token keyword">width</span><span class="token punctuation">:</span><span class="token number">100</span>%; height<span class="token punctuation">:</span><span class="token number">100</span>%; <span class="token keyword">position</span><span class="token punctuation">:</span>relative; <span class="token token-operator punctuation">}</span> #Loadanimation<span class="token token-operator punctuation">-</span>center<span class="token token-operator punctuation">-</span>absolute<span class="token token-operator punctuation">{</span> <span class="token keyword">position</span><span class="token punctuation">:</span>absolute; <span class="token keyword">left</span><span class="token punctuation">:</span><span class="token number">50</span>%; top<span class="token punctuation">:</span><span class="token number">50</span>%; height<span class="token punctuation">:</span>200px; <span class="token keyword">width</span><span class="token punctuation">:</span>200px; <span class="token keyword">margin</span>-top<span class="token punctuation">:</span>-100px; <span class="token keyword">margin</span>-left<span class="token punctuation">:</span>-100px; <span class="token token-operator punctuation">}</span> <span class="token punctuation">.</span>xccx_object<span class="token token-operator punctuation">{</span> -moz<span class="token token-operator punctuation">-</span>border<span class="token token-operator punctuation">-</span>radius<span class="token punctuation">:</span><span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>%; -webkit<span class="token token-operator punctuation">-</span>border<span class="token token-operator punctuation">-</span>radius<span class="token punctuation">:</span><span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>%; border<span class="token token-operator punctuation">-</span>radius<span class="token punctuation">:</span><span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>% <span class="token number">50</span>%; <span class="token keyword">position</span><span class="token punctuation">:</span>absolute; border<span class="token token-operator punctuation">-</span>left<span class="token punctuation">:</span>5px solid #87CEFA; border<span class="token token-operator punctuation">-</span>right<span class="token punctuation">:</span>5px solid #FFC0CB; border<span class="token token-operator punctuation">-</span>top<span class="token punctuation">:</span>5px solid transparent; border<span class="token token-operator punctuation">-</span>bottom<span class="token punctuation">:</span>5px solid transparent; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token punctuation">:</span>animate <span class="token number">2</span><span class="token punctuation">.</span>5s infinite; animation<span class="token punctuation">:</span>animate <span class="token number">2</span><span class="token punctuation">.</span>5s infinite; <span class="token token-operator punctuation">}</span> #xccx_one<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>75px; top<span class="token punctuation">:</span>75px; <span class="token keyword">width</span><span class="token punctuation">:</span>50px; height<span class="token punctuation">:</span>50px; <span class="token token-operator punctuation">}</span> #xccx_two<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>65px; top<span class="token punctuation">:</span>65px; <span class="token keyword">width</span><span class="token punctuation">:</span>70px; height<span class="token punctuation">:</span>70px; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>1s; animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>1s; <span class="token token-operator punctuation">}</span> #xccx_three<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>55px; top<span class="token punctuation">:</span>55px; <span class="token keyword">width</span><span class="token punctuation">:</span>90px; height<span class="token punctuation">:</span>90px; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>2s;animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>2s; <span class="token token-operator punctuation">}</span> #xccx_four<span class="token token-operator punctuation">{</span> <span class="token keyword">left</span><span class="token punctuation">:</span>45px; top<span class="token punctuation">:</span>45px; <span class="token keyword">width</span><span class="token punctuation">:</span>110px; height<span class="token punctuation">:</span>110px; -webkit<span class="token token-operator punctuation">-</span>animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>3s; animation<span class="token token-operator punctuation">-</span>delay<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">.</span>3s; <span class="token token-operator punctuation">}</span> @-webkit<span class="token token-operator punctuation">-</span>keyframes animate<span class="token token-operator punctuation">{</span><span class="token number">50</span>%<span class="token token-operator punctuation">{</span> -ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token number">100</span>%<span class="token token-operator punctuation">{</span>-ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token token-operator punctuation">}</span> @keyframes animate<span class="token token-operator punctuation">{</span><span class="token number">50</span>%<span class="token token-operator punctuation">{</span> -ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>180deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token number">100</span>%<span class="token token-operator punctuation">{</span> -ms<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; -webkit<span class="token token-operator punctuation">-</span>transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; transform<span class="token punctuation">:</span>rotate<span class="token punctuation">(</span>0deg<span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span> <span class="token token-operator punctuation">}</span>#Loadanimation{ background-color:#fff; height:100%; width:100%; position:fixed; z-index:1; margin-top:0px;top:0px; } #Loadanimation-center{ width:100%; height:100%; position:relative; } #Loadanimation-center-absolute{ position:absolute; left:50%; top:50%; height:200px; width:200px; margin-top:-100px; margin-left:-100px; } .xccx_object{ -moz-border-radius:50% 50% 50% 50%; -webkit-border-radius:50% 50% 50% 50%; border-radius:50% 50% 50% 50%; position:absolute; border-left:5px solid #87CEFA; border-right:5px solid #FFC0CB; border-top:5px solid transparent; border-bottom:5px solid transparent; -webkit-animation:animate 2.5s infinite; animation:animate 2.5s infinite; } #xccx_one{ left:75px; top:75px; width:50px; height:50px; } #xccx_two{ left:65px; top:65px; width:70px; height:70px; -webkit-animation-delay:0.1s; animation-delay:0.1s; } #xccx_three{ left:55px; top:55px; width:90px; height:90px; -webkit-animation-delay:0.2s;animation-delay:0.2s; } #xccx_four{ left:45px; top:45px; width:110px; height:110px; -webkit-animation-delay:0.3s; animation-delay:0.3s; } @-webkit-keyframes animate{50%{ -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } 100%{-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } } @keyframes animate{50%{ -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } 100%{ -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } }
第二步：
将以下代码填写入头部文件 一般都为 header.php
<div <span class="token keyword">id</span>="Loadanimation" <span class="token keyword">style</span>="z<span class="token token-operator punctuation">-</span>index<span class="token punctuation">:</span><span class="token number">999999</span>;"> <div <span class="token keyword">id</span>="Loadanimation<span class="token token-operator punctuation">-</span>center"> <div <span class="token keyword">id</span>="Loadanimation<span class="token token-operator punctuation">-</span>center<span class="token token-operator punctuation">-</span>absolute"> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_four"></div> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_three"></div> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_two"></div> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_one"></div> </div> </div> </div> <script> $<span class="token punctuation">(</span>function<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token token-operator punctuation">{</span> $<span class="token punctuation">(</span>"#Loadanimation"<span class="token punctuation">)</span><span class="token punctuation">.</span>fadeOut<span class="token punctuation">(</span><span class="token number">540</span><span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span><span class="token punctuation">)</span>; </script><div <span class="token keyword">id</span>="Loadanimation" <span class="token keyword">style</span>="z<span class="token token-operator punctuation">-</span>index<span class="token punctuation">:</span><span class="token number">999999</span>;"> <div <span class="token keyword">id</span>="Loadanimation<span class="token token-operator punctuation">-</span>center"> <div <span class="token keyword">id</span>="Loadanimation<span class="token token-operator punctuation">-</span>center<span class="token token-operator punctuation">-</span>absolute"> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_four"></div> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_three"></div> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_two"></div> <div <span class="token keyword">class</span>="xccx_object" <span class="token keyword">id</span>="xccx_one"></div> </div> </div> </div> <script> $<span class="token punctuation">(</span>function<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token token-operator punctuation">{</span> $<span class="token punctuation">(</span>"#Loadanimation"<span class="token punctuation">)</span><span class="token punctuation">.</span>fadeOut<span class="token punctuation">(</span><span class="token number">540</span><span class="token punctuation">)</span>; <span class="token token-operator punctuation">}</span><span class="token punctuation">)</span>; </script><div id="Loadanimation" style="z-index:999999;"> <div id="Loadanimation-center"> <div id="Loadanimation-center-absolute"> <div class="xccx_object" id="xccx_four"></div> <div class="xccx_object" id="xccx_three"></div> <div class="xccx_object" id="xccx_two"></div> <div class="xccx_object" id="xccx_one"></div> </div> </div> </div> <script> $(function(){ $("#Loadanimation").fadeOut(540); }); </script>
注意 注意 fadeOut 里面填写的是毫秒数
效果图
后言
本 loading 可以自定义 网上也有很多 css 的 只要替换第二步的代码都可以成功 (js 代码别替换)
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
