<style type="text/css">
* {
margin: 0;
padding: 0;
}
:root {
/* 自定义属性 */
/* 上外边距 */
--margin-top: 0;
/* 左外边距 */
--margin-left: 0;
/* 动画时长*/
--animation-duration: 0s
/* 动画延迟时间*/
--animation-delay:0s
}
body {
/* 百分100的窗口高度 */
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #111;
overflow: hidden;
/* 视觉距离 */
perspective: 1300px;
}
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-duration: reverse;
}
/* 定义动画 */
@keyframes rotY {
to {
transform: rotateY(1turn);
}
}
</style>
</head>
<body>
<div class="container">
</div>
<script type="text/javascript">
var words =
['新年快乐',
'恭喜发财',
'红包拿来',
'吉时吉日疾如风',
'窗前明月光',
'意识地上霜',
'举头望明月', '回到法国还会记得发货',
999, 000];
// 生成指定范围的随机数-保留小数后两位
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');
// 随机生成文字颜色
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)
</script>
扫一扫
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
