web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画

效果图

html

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

JavaScript

// 祝词
var words = [
    '健康码常绿',
    '股票飙红',
    '生意兴隆',
    '财源广进',
    '心想事成',
    '永远十八',
    '身体健康',
    '大富大贵',
    '大吉大利',
    '万事如意',
    '美梦成真',
    '吉祥如意',
    '鸿运当头',
    '五福临门',
    '吉星高照',
    '好运连连',
    '八面春风',
    '百事亨通',
    '万事大吉',
    '喜气洋洋',
    '岁岁今日',
    '年年今朝',
    '和气吉祥',
    '百事顺遂',
    '福星高照',
    '前途光明',
    '喜上眉梢',
    '荣华富贵',
    '家庭和睦',
    '爱情事业双丰收',
    '工作顺利',
    '百年好合',
    '龙马精神',
    '出入平安',
    '前程万里',
    '年年有余',
    '万事胜意',
    '福如东海',
    '寿比南山',
    '学业有成',
    '大展宏图',
    '顺风顺水',
    '事业辉煌',
    '生意红火',
    '吉时吉日疾如风',
    '丰年丰月如风增',
    '增福增财增长寿',
    '寿山寿海寿长生',
    '生财生利生贵子',
    '子孝孙贤代代荣',
    '荣华富贵年年有',
    '有钱有势有前程'
];

// 生成指定范围随机数（保留小数点后两位）
function randomNum(min, max) {
    var num = (Math.random() * (max - min + 1) + min).toFixed(2);
    return num;
}

// 初始函数
function init() {
    var container = document.querySelector('.container');
    var f = document.createDocumentFragment(); //创建文档片段对象

    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');
        // 生成随机数值，并赋值给自定义属性
        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函数可对其调用 */
    /* 上外边距 */
    --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;
    /* 设置视距 */
    perspective: 1300px;
}

div {
    /* 所有div默认开启3D属性 */
    transform-style: preserve-3d;
}

.word-box,
.word-box .word {
    position: absolute;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: rotY 0s linear infinite;
    /* 设置动画时长 */
    animation-duration: var(--animation-duration);
    /* 设置动画延迟 */
    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);
    }
}