ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して抽象的な水の波紋アニメーションを実現する方法 (ソースコードを添付)
この記事の内容は、純粋な CSS を使用して抽象的な水の波のアニメーションを実現する方法に関するものです (ソースコードが添付されています)。必要な方は参考にしていただければ幸いです。あなたに。
##ソースコードのダウンロード
<div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }コンテナ サイズを定義します:
.container { width: 30em; height: 30em; font-size: 10px; }グリッド レイアウトを使用して、9 つのサブ要素を 3 * 3 グリッドに配置します:
.container { display: grid; grid-template-columns: repeat(3, 1fr); }コンテナ内のサブ要素のスタイルを設定します〜疑似要素を設定します:
.container span { position: relative; } .container span::before, .container span::after { content: ''; position: absolute; box-sizing: border-box; border-style: none solid solid none; border-width: 1em; border-color: gold; width: 100%; height: 100%; }コンテナの先端が上を向くように回転します:
.container { transform: rotate(-135deg); }子要素のサイズが小さいものから大きいものに変化するアニメーションを大きくします:
.container span::before, .container span::after { animation: animate-scale 1.6s linear infinite; } @keyframes animate-scale { from { width: 1%; height: 1%; } to { width: 100%; height: 100%; } }要素の境界線の色を変更するための子アニメーションを追加します:
.container span::before, .container span::after { animation: animate-border-color 1.6s linear infinite, animate-scale 1.6s linear infinite; } @keyframes animate-border-color { 0%, 25% { border-color: tomato; } 50%, 75% { border-color: gold; } 100% { border-color: black; } }子要素の境界線の幅を変更するためのアニメーションを追加します:
.container span::before, .container span::after { animation: animate-border-width 1.6s linear infinite, animate-border-color 1.6s linear infinite, animate-scale 1.6s linear infinite; }最後に、
::after
の速度を落とします。疑似要素のアニメーション時間を半拍分:.container span::after { animation-delay: -0.8s; } @keyframes animate-border-width { 0%, 100%{ border-width: 0.1em; } 25% { border-width: 1.5em; } }
Done!
以上が純粋な CSS を使用して抽象的な水の波紋アニメーションを実現する方法 (ソースコードを添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。