为你的主题加上loading效果吧
共计 1949 个字符，预计需要花费 5 分钟才能阅读完成。
前言
今天水一篇文章 说起来 我已经差不多一个月没更新文章了吧
主要还是不知道更新啥！！！
教程开始
第一步：
新建一个 loading 样式 css
将以下代码放进去 然后引用这个文件
|
1 |
#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></code><i class="fa fa-clone"></i> |
第二步：
将以下代码填写入头部文件 一般都为 header.php
|
1 |
<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></code><i class="fa fa-clone"></i> |
注意 注意 fadeOut 里面填写的是毫秒数
效果图
后言
本 loading 可以自定义 网上也有很多 css 的 只要替换第二步的代码都可以成功 (js 代码别替换)
创作不易，用心坚持，请喝一怀爱心咖啡！继续坚持创作~~
