溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“怎么用純CSS實現抽象的水波蕩漾的動畫”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“怎么用純CSS實現抽象的水波蕩漾的動畫”這篇文章吧。
代碼解讀
定義dom，容器中包含9個元素：
<divclass="container">
<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;
}
用grid布局把9個子元素排列成3*3的網格狀：
.container{
display:grid;
grid-template-columns:repeat(3,1fr);
}
設置容器內子元素的樣式，是通過偽元素來設置的：
.containerspan{
position:relative;
}
.containerspan::before,
.containerspan::after
{
content:'';
position:absolute;
box-sizing:border-box;
border-style:nonesolidsolidnone;
border-width:1em;
border-color:gold;
width:100%;
height:100%;
}
旋轉容器，讓它的尖端朝上：
.container{
transform:rotate(-135deg);
}
增加子元素尺寸由小到大變化的動畫：
.containerspan::before,
.containerspan::after
{
animation:
animate-scale1.6slinearinfinite;
}
@keyframesanimate-scale{
from{
width:1%;
height:1%;
}
to{
width:100%;
height:100%;
}
}
增加子元素邊框色變化的動畫：
.containerspan::before,
.containerspan::after
{
animation:
animate-border-color1.6slinearinfinite,
animate-scale1.6slinearinfinite;
}
@keyframesanimate-border-color{
0%,25%{
border-color:tomato;
}
50%,75%{
border-color:gold;
}
100%{
border-color:black;
}
}
增加子元素邊框寬度變化的動畫：
.containerspan::before,
.containerspan::after
{
animation:
animate-border-width2.6slinearinfinite,
animate-border-color1.6slinearinfinite,
animate-scale1.6slinearinfinite;
}
最后，讓::after偽元素的動畫時間慢半拍：
.containerspan::after{
animation-delay:-0.8s;
}
@keyframesanimate-border-width{
0%,100%{
border-width:0.1em;
}
25%{
border-width:1.5em;
}
}
以上是“怎么用純CSS實現抽象的水波蕩漾的動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
