效果:
这里其实全是span 标签 然后使用css3动画让他动起来就行了 比较简单 直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: lightblue;
overflow: hidden;
}
span {
width: 100px;
color: gray;
display: block;
font-size: 20px;
font-family: FZXingKai-S04S, Cochin, Georgia, Times, 'Times New Roman', serif;
user-select: none;
position: absolute;
animation: move 15s linear infinite;
}
.bigbox {
position: absolute;
transform: rotate(20deg);
}
@keyframes move {
100% {
transform: rotate(10deg) translateX(2194px);
}
}
</style>
</head>
<body>
<div class="bigbox"></div>
<script>
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++) {
var span = document.createElement('span')
span.innerText = "桃花朵朵开"
span.style.transform = `rotate(10deg)`
span.style.top = `${window.innerHeight/7*(-10+i)}px`
span.style.left = `${window.innerWidth/7*(-10+j)}px`
document.querySelector('.bigbox').appendChild(span)
}
console.log(window.innerWidth / 7)
}
</script>
</body>
</html>
这么多标签 我们可以用循环来创建 但是如果只有一整个屏幕的文字的话 很显然不能做到全屏覆盖 所以我总共创建了4个屏幕的span标签 然后让它旋转后向下运动
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++) {
var span = document.createElement('span')
//设置需要显示的文字
span.innerText = "桃花朵朵开"
//让他旋转10度
span.style.transform = `rotate(10deg)`
//一个屏幕显示49个 可以根据自己喜好调整密度
span.style.top = `${window.innerHeight/7*(-10+i)}px`
span.style.left = `${window.innerWidth/7*(-10+j)}px`
document.querySelector('.bigbox').appendChild(span)
}
}
定义动画
这里会有个小bug 因为是循环创建的span标签所以宽度不好确定所以 会出现跳帧的bug
解决办法:计算运动的距离+两个标签之间的距离
transform: rotate(10deg) translateX(计算运动的距离+两个标签之间的距离px);
@keyframes move {
100% {
transform: rotate(10deg) translateX(2194px);
}
}
使用动画
span {
animation: move 15s linear infinite;
}
上面给父盒子加了定位和旋转角度 (可加可不加) 不加改一改循环里的角度即可
.bigbox {
position: absolute;
transform: rotate(20deg);
}