怎么用純CSS實(shí)現(xiàn)抽象的水波蕩漾的動(dòng)畫(huà)

這篇文章主要為大家展示了“怎么用純CSS實(shí)現(xiàn)抽象的水波蕩漾的動(dòng)畫(huà)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么用純CSS實(shí)現(xiàn)抽象的水波蕩漾的動(dòng)畫(huà)”這篇文章吧。

    代碼解讀

    定義dom，容器中包含9個(gè)元素：

    <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個(gè)子元素排列成3*3的網(wǎng)格狀：

    .container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    }

    設(shè)置容器內(nèi)子元素的樣式，是通過(guò)偽元素來(lá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)畫(huà)：

    .containerspan::before,

    .containerspan::after

    {

    animation:

    animate-scale1.6slinearinfinite;

    }

    @keyframesanimate-scale{

    from{

    width:1%;

    height:1%;

    }

    to{

    width:100%;

    height:100%;

    }

    }

    增加子元素邊框色變化的動(dòng)畫(huà)：

    .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)畫(huà)：

    .containerspan::before,

    .containerspan::after

    {

    animation:

    animate-border-width2.6slinearinfinite,

    animate-border-color1.6slinearinfinite,

    animate-scale1.6slinearinfinite;

    }

    最后，讓::after偽元素的動(dòng)畫(huà)時(shí)間慢半拍：

    .containerspan::after{

    animation-delay:-0.8s;

    }

    @keyframesanimate-border-width{

    0%,100%{

    border-width:0.1em;

    }

    25%{

    border-width:1.5em;

    }

    }

以上是“怎么用純CSS實(shí)現(xiàn)抽象的水波蕩漾的動(dòng)畫(huà)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！