亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么用CSS實現眼冒金星的動畫效果

發布時間:2022-02-24 15:02:16 來源:億速云 閱讀:194 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關怎么用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實現眼冒金星的動畫效果

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

资讯| 赤水市| 迁西县| 海伦市| 四子王旗| 彭阳县| 绥阳县| 扶余县| 济南市| 张家川| 曲麻莱县| 泸定县| 洛阳市| 班戈县| 集贤县| 云安县| 高尔夫| 五大连池市| 宣威市| 英超| 邮箱| 靖州| 景德镇市| 封开县| 祁连县| 贺州市| 岱山县| 南江县| 玛曲县| 邵阳市| 横峰县| 封丘县| 福州市| 隆尧县| 门源| 乐平市| 广平县| 始兴县| 尼勒克县| 永城市| 湘潭市|