這篇文章主要為大家展示了“怎么用純CSS實(shí)現(xiàn)抽象的水波蕩漾的動(dòng)畫”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么用純CSS實(shí)現(xiàn)抽象的水波蕩漾的動(dòng)畫”這篇文章吧。
站在用戶的角度思考問題，與客戶深入溝通，找到洛隆網(wǎng)站設(shè)計(jì)與洛隆網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋洛隆地區(qū)。
代碼解讀
定義dom，容器中包含9個(gè)元素：
居中顯示：
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個(gè)子元素排列成3*3的網(wǎng)格狀：
.container{
display:grid;
grid-template-columns:repeat(3,1fr);
}
設(shè)置容器內(nèi)子元素的樣式，是通過偽元素來設(shè)置的：
.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%;
}
旋轉(zhuǎn)容器，讓它的尖端朝上：
.container{
transform:rotate(-135deg);
}
增加子元素尺寸由小到大變化的動(dòng)畫：
.containerspan::before,
.containerspan::after
{
animation:
animate-scale1.6slinearinfinite;
}
@keyframesanimate-scale{
from{
width:1%;
height:1%;
}
to{
width:100%;
height:100%;
}
}
增加子元素邊框色變化的動(dòng)畫：
.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;
}
}
增加子元素邊框?qū)挾茸兓膭?dòng)畫：
.containerspan::before,
.containerspan::after
{
animation:
animate-border-width2.6slinearinfinite,
animate-border-color1.6slinearinfinite,
animate-scale1.6slinearinfinite;
}
最后，讓::after偽元素的動(dòng)畫時(shí)間慢半拍：
.containerspan::after{
animation-delay:-0.8s;
}
@keyframesanimate-border-width{
0%,100%{
border-width:0.1em;
}
25%{
border-width:1.5em;
}
}.jpg)
以上是“怎么用純CSS實(shí)現(xiàn)抽象的水波蕩漾的動(dòng)畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
