今回はCSS読み込みアニメーション効果の使い方についてのチュートリアルをお届けします。CSS読み込みアニメーション効果を使用する際の注意点を実際に見てみましょう。
この記事では、純粋な CSS 読み込みエフェクトのコード例を紹介し、皆さんと共有します。詳細は次のとおりです:
プレビュー
コード
CSS キーフレームを使用してキーフレーム アニメーションをカスタマイズする
<!DOCTYPE html> <html lang="en"> <head> <title>Loading</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p#preload { margin: auto; position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 9999999 } p#preload>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%) } p#preload .cssload-loader { position: absolute; left: 0; right: 0; margin: auto; width: 62px; height: 62px; top: 50%; margin-top: -31px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; perspective: 780px } p#preload .cssload-inner { position: absolute; width: 100%; height: 100%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } p#preload .cssload-inner.cssload-one { left: 0; top: 0; animation: cssload-rotate-one 1.15s linear infinite; -o-animation: cssload-rotate-one 1.15s linear infinite; -ms-animation: cssload-rotate-one 1.15s linear infinite; -webkit-animation: cssload-rotate-one 1.15s linear infinite; -moz-animation: cssload-rotate-one 1.15s linear infinite; border-bottom: 3px solid #000 } p#preload .cssload-inner.cssload-two { right: 0; top: 0; animation: cssload-rotate-two 1.15s linear infinite; -o-animation: cssload-rotate-two 1.15s linear infinite; -ms-animation: cssload-rotate-two 1.15s linear infinite; -webkit-animation: cssload-rotate-two 1.15s linear infinite; -moz-animation: cssload-rotate-two 1.15s linear infinite; border-right: 3px solid #000 } p#preload .cssload-inner.cssload-three { right: 0; bottom: 0; animation: cssload-rotate-three 1.15s linear infinite; -o-animation: cssload-rotate-three 1.15s linear infinite; -ms-animation: cssload-rotate-three 1.15s linear infinite; -webkit-animation: cssload-rotate-three 1.15s linear infinite; -moz-animation: cssload-rotate-three 1.15s linear infinite; border-top: 3px solid #000 } @keyframes cssload-rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-o-keyframes cssload-rotate-one { 0% { -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-ms-keyframes cssload-rotate-one { 0% { -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-webkit-keyframes cssload-rotate-one { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-moz-keyframes cssload-rotate-one { 0% { -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @keyframes cssload-rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-o-keyframes cssload-rotate-two { 0% { -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-ms-keyframes cssload-rotate-two { 0% { -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-webkit-keyframes cssload-rotate-two { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-moz-keyframes cssload-rotate-two { 0% { -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @keyframes cssload-rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-o-keyframes cssload-rotate-three { 0% { -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-ms-keyframes cssload-rotate-three { 0% { -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-webkit-keyframes cssload-rotate-three { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-moz-keyframes cssload-rotate-three { 0% { -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } </style> </head> <body> <p id="preload"> <p class="cssload-loader"> <p class="cssload-inner cssload-one"></p> <p class="cssload-inner cssload-two"></p> <p class="cssload-inner cssload-three"></p> </p> </p> </body> </html>
この記事のケース あなたはこの方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
CSS3のlinear-gradient線形グラデーションの使い方
以上がCSS読み込みアニメーション効果の使い方のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。