Web サイトに読み込みを追加し、読み込み効果を待ちます | 読み込みページの読み込み追加チュートリアル
レンダリング:
チュートリアルの開始
新しい読み込みスタイルの CSS を作成し、
その中に次のコードを記述し、このファイルを参照します
コード
-
#Loadanimation{ 背景色:#fff; 高さ:100%; 幅:100%; 位置:固定; z インデックス:1; マージントップ:0px;トップ:0px; } #Loadanimation-center{ width:100%; 高さ:100%; 位置:相対; # Loadanimation-center-absolute{ 位置:絶対; 左:50%; トップ:50%; 高さ:200ピクセル; 幅:200ピクセル; マージントップ:-100px; マージン左:-100px; .xccx_object{ -moz-border-radius:50% 50% 50 % 50%; -webkit-border-radius:50% 50% 50% 50%; 境界半径:50% 50% 50% 50%;
位置:絶対;
ボーダー左:5px ソリッド #87CEFA;
ボーダー右:5px ソリッド #FFC0CB;
border-top:5 ピクセルの透明な実線。
border-bottom:5 ピクセルの透明な実線。
-webkit-animation:2.5 秒を無限にアニメーション化します。
アニメーション:アニメーション 2.5 秒、無限; #xccx_one{
左 :75px; 上:75ピクセル; 幅:50ピクセル; 高さ:50ピクセル; #xccx_two { 左:65px; 上:65ピクセル; 幅:70ピクセル; 高さ:70ピクセル; -webkit-アニメーション遅延:0.1秒; アニメーション遅延:0.1秒; #xccx_three { 左:55px; 上:55ピクセル; 幅:90ピクセル;
高さ:90ピクセル;
-webkit-アニメーション遅延:0.2秒;アニメーション遅延:0.2秒; #xccx_four{
左 :45px; 上:45ピクセル; 幅:110ピクセル; 高さ:110ピクセル; -webkit-アニメーション遅延:0.3秒; アニメーション遅延:0.3秒; } @-webkit-keyframes アニメーション化{50%{ -ms-transform:rotate(180deg); -webkit-transform:回転(180度); 変換:回転(180度); 100 %{-ms-transform:rotate(0deg); -webkit-transform:回転(0度); 変換:回転(0度); @keyframes animate{50%{ -ms-transform: rotate (180deg); -webkit-transform:回転(180度);
変換:回転(180度);
100
%{ -ms-transform:rotate(0deg); -webkit-transform:回転(0度); 変換:回転(0度); } }
ステップ2：
次のコードをヘッダー ファイル (通常は header.php) に入力します。
コード
-
<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 にはミリ秒が入力されていることに注意してください。
この読み込みはカスタマイズ可能で、インターネット上に多数の CSS があります。2 番目のステップのコードを置き換えさえすれば、成功します (JS コードは置き換えないでください)。