效果图
文章来源:https://www.toymoban.com/news/detail-849283.html
文章来源地址https://www.toymoban.com/news/detail-849283.html
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);
}
}
到了这里,关于web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!