如何建设一个视频网站,西安个人做网站,自动免费设计logo,济南 微网站MENU 效果图htmlJavaScriptstyle 效果图 html
div classcontainer/divJavaScript
// 祝词
var words [健康码常绿,股票飙红,生意兴隆,财源广进,心想事成,永远十八,身体健康,大富大贵,大吉大利,万事如意,美梦成真,吉祥如意,鸿运当头,五福临门,吉… MENU 效果图htmlJavaScriptstyle 效果图 html
div classcontainer/divJavaScript
// 祝词
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);}
}
