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);}
}