這次帶給大家使用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;
}大功告成！
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是使用CSS實現乒乓球對打動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
