（先分享個別人講解的視頻，八分鐘我覺得不綽水球特效）
大概思路就是一個圓圈加一個邊框四個角有弧度的矩形，然后讓矩形在平面上旋轉，再把矩形多余的地方用 overflow: hidden; 藏起來就可以了
其他就是一些小地方的修飾了，不太重要，看個人喜好，比如外面套一層 div ，設定一個粉色 3px 寬的邊框，再設個 padding 和里面的隔開，設定個陰影，還有把矩形的轉動速度設定為勻速（我覺得這樣好看點）
<!DOCTYPE html>
<html>
<head>
<style>
*{
padding: 0px;
margin: 0px;
}
body{
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
background-color: skyblue;
}
#wave_div{
position: fixed;
border: 3px solid pink;
border-radius: 50%;
padding: 10px;
left: 50vw;
top: 50vh;
background-color: white;
transform: translateX(-113px) translateY(-113px);
box-shadow: 10px 10px 5px #888888;
overflow: hidden;
}
#wave_item{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: pink;
}
#wave_item::before{
content: "";
position: absolute;
transform-origin: 40% 3%;
border-radius: 35%;
width: 250px;
height: 250px;
background-color: white;
animation-name: wave_change;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wave_change {
from {transform: rotate(0deg) translate(-30px, -120px)}
to {transform: rotate(360deg) translate(-30px, -120px)}
}
</style>
</head>
<body>
<div>
<div id = 'wave_div'>
<div id = 'wave_item'>
</div>
</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413918.html
標籤：其他
上一篇：【js實戰篇】點名抽獎系統
下一篇：vue ui創建專案的常見錯誤