怎么用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;

    }

    設置容器中子元素的布局方式，形成一個3*3的網格，其中--columns是網格每一邊上的子元素數量：

    .container{

    display:grid;

    --columns:3;

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

    }

    定義子元素樣式：

    .containerspan{

    width:25px;

    height:25px;

    color:lime;

    background-color:currentColor;

    }

    增加子元素的動畫效果，總動畫時長是5秒，其中第1秒（0%~20%）有動畫，其余4秒（20%~100%）靜止：

    .containerspan{

    transform:scale(0);

    animation:spin5slinearinfinite;

    }

    @keyframesspin{

    0%{

    transform:rotate(0deg)scale(1);

    }

    5%,15%{

    transform:rotate(90deg)scale(0);

    background:white;

    }

    17.5%{

    transform:rotate(180deg)scale(1);

    background-color:currentColor;

    }

    20%,100%{

    transform:rotate(90deg)scale(0);

    }

    }

    設置動畫延時，使各子元素的動畫隨機延時4秒之內的任意時間：

    .containerspan{

    animation-delay:calc(var(--delay)*1s);

    }

    .containerspan:nth-child(1){--delay:0.8}

    .containerspan:nth-child(2){--delay:0.2}

    .containerspan:nth-child(3){--delay:1.9}

    .containerspan:nth-child(4){--delay:3.9}

    .containerspan:nth-child(5){--delay:2.8}

    .containerspan:nth-child(6){--delay:3.5}

    .containerspan:nth-child(7){--delay:1.5}

    .containerspan:nth-child(8){--delay:2.3}

    .containerspan:nth-child(9){--delay:1.7}

    至此，靜態效果完成，接下來批量處理dom元素。

    引入d3庫：

    <scriptsrc="https://d3js.org/d3.v5.min.js"></script>

    刪除掉css文件中的--columns變量聲明，用d3為變量賦值：

    constCOLUMNS=3;

    d3.select('.container')

    .style('--columns',COLUMNS);

    刪除掉html文件中的<span>子元素，用d3動態生成：

    d3.select('.container')

    .style('--columns',COLUMNS)

    .selectAll('span')

    .data(d3.range(COLUMNS*COLUMNS))

    .enter()

    .append('span');

    刪除掉css文件中的--delay變量聲明，用d3為變量生成隨機數：

    d3.select('.container')

    .style('--columns',COLUMNS)

    .selectAll('span')

    .data(d3.range(COLUMNS*COLUMNS))

    .enter()

    .append('span')

    .style('--delay',()=>Math.random()*4);

    最后，把邊長改為15，生成更多的子元素，加強視覺效果：

    constCOLUMNS=15;

關于“怎么用CSS實現眼冒金星的動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。