今回はCSSを使って卓球の格闘アニメーションを実現する方法を紹介します。CSSを使って卓球の格闘アニメーションを実現するための注意点とは以下のとおりです。
コード解釈 domを定義、コンテナには左ラケット、小さなボール、右ラケットが含まれます:<p class="court"> <p class="left-paddle"></p> <p class="ball"></p> <p class="right-paddle"></p> </p>
body { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(silver, dimgray); }
ボックスモデル:
* { box-sizing: border-box; }
.court { width: 20em; height: 20em; color: white; border: 1em solid currentColor; }
.court { position: relative; } .left-paddle width: 1em; height: calc(50% - 1em); background-color: currentColor; position: absolute; top: 1em; left: 1em; }
.left-paddle { animation: left-moving 1s linear infinite alternate; } @keyframes left-moving { to { transform: translateY(100%); } }
.right-paddle width: 1em; height: calc(50% - 1em); background-color: currentColor; position: absolute; top: 1em; left: 1em; bottom: 1em; right: 1em; }
.right-paddle { animation: right-moving 1s linear infinite alternate; } @keyframes right-moving { to { transform: translateY(-100%); } }
.ball { width: 100%; height: 1em; border-left: 1em solid currentColor; position: absolute; left: 2em; top: calc(50% - 1.5em); }
.ball { animation: bounce 1s linear infinite alternate; } @keyframes bounce { to { left: calc(100% - 3em); } }
.left-paddle, .right-paddle { width: 1em; height: calc(50% - 1em); background-color: currentColor; position: absolute; animation: 1s linear infinite alternate; } .left-paddle { top: 1em; left: 1em; animation-name: left-moving; } .right-paddle { bottom: 1em; right: 1em; animation-name: right-moving; }
Chart.js 軽量チャート ライブラリのユース ケース分析
以上がCSSを使用して卓球の格闘アニメーションを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。