效果圖

---

文章來源地址http://www.zghlxwxcb.cn/news/detail-849283.html

html

<div class="container"></div>

JavaScript

// 祝詞
var words = [
    '健康碼常綠',
    '股票飆紅',
    '生意興隆',
    '財源廣進',
    '心想事成',
    '永遠十八',
    '身體健康',
    '大富大貴',
    '大吉大利',
    '萬事如意',
    '美夢成真',
    '吉祥如意',
    '鴻運當(dāng)頭',
    '五福臨門',
    '吉星高照',
    '好運連連',
    '八面春風(fēng)',
    '百事亨通',
    '萬事大吉',
    '喜氣洋洋',
    '歲歲今日',
    '年年今朝',
    '和氣吉祥',
    '百事順?biāo)?,
    '福星高照',
    '前途光明',
    '喜上眉梢',
    '榮華富貴',
    '家庭和睦',
    '愛情事業(yè)雙豐收',
    '工作順利',
    '百年好合',
    '龍馬精神',
    '出入平安',
    '前程萬里',
    '年年有余',
    '萬事勝意',
    '福如東海',
    '壽比南山',
    '學(xué)業(yè)有成',
    '大展宏圖',
    '順風(fēng)順?biāo)?,
    '事業(yè)輝煌',
    '生意紅火',
    '吉時吉日疾如風(fēng)',
    '豐年豐月如風(fēng)增',
    '增福增財增長壽',
    '壽山壽海壽長生',
    '生財生利生貴子',
    '子孝孫賢代代榮',
    '榮華富貴年年有',
    '有錢有勢有前程'
];

// 生成指定范圍隨機數(shù)（保留小數(shù)點后兩位）
function randomNum(min, max) {
    var num = (Math.random() * (max - min + 1) + min).toFixed(2);
    return num;
}

// 初始函數(shù)
function init() {
    var container = document.querySelector('.container');
    var f = document.createDocumentFragment(); //創(chuàng)建文檔片段對象

    words.forEach(w => {
        var word_box = document.createElement('div');
        var word = document.createElement('div');

        word.innerText = w;
        word.classList.add('word');

        // 隨機生成色相值（0為紅色、120為綠色、240為藍色、360為紅色）
        var hue = randomNum(0, 240);
        word.style.color = 'hsl(' + hue + ',100%,65%)';

        word_box.classList.add('word-box');
        // 生成隨機數(shù)值，并賦值給自定義屬性
        word_box.style.setProperty('--margin-top', randomNum(-40, 20) + 'vh');
        word_box.style.setProperty('--margin-left', randomNum(6, 35) + 'vw');
        word_box.style.setProperty('--animation-duration', randomNum(8, 20) + 's');
        word_box.style.setProperty('--animation-delay', randomNum(-20, 0) + 's');

        word_box.appendChild(word);
        f.appendChild(word_box);
    })
    container.appendChild(f);
}

// 綁定加載事件
window.addEventListener('load', init);

style

* {
    margin: 0;
    padding: 0;
}

:root {
    /* 自定義屬性，這幾個屬性等會是通過js隨機生成，通過var函數(shù)可對其調(diào)用 */
    /* 上外邊距 */
    --margin-top: 0;
    /* 左外邊距 */
    --margin-left: 0;
    /* 動畫時長 */
    --animation-duration: 0s;
    /* 動畫延遲時間 */
    --animation-delay: 0s;
}

body {
    /* 100%窗口高度 */
    height: 100vh;
    /* 彈性布局 居中顯示 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #111;
    /* 溢出隱藏 */
    overflow: hidden;
    /* 設(shè)置視距 */
    perspective: 1300px;
}

div {
    /* 所有div默認開啟3D屬性 */
    transform-style: preserve-3d;
}

.word-box,
.word-box .word {
    position: absolute;
    /* 執(zhí)行動畫：動畫名 時長 線性的 無限次播放 */
    animation: rotY 0s linear infinite;
    /* 設(shè)置動畫時長 */
    animation-duration: var(--animation-duration);
    /* 設(shè)置動畫延遲 */
    animation-delay: var(--animation-delay);
}

.word-box {
    margin-top: var(--margin-top);
}

.word-box .word {
    margin-left: var(--margin-left);
}

.word-box .word {
    /* 反向動畫 */
    animation-direction: reverse;
}


/* 定義動畫 */

@keyframes rotY {
    to {
        /* 1turn表示一圈 */
        transform: rotateY(1turn);
    }
}

到了這里，關(guān)于web前端之3D標(biāo)簽動畫、指定范圍的隨機數(shù)、動態(tài)設(shè)置css變量、文檔片段對象、反向動畫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！