1、获取文本内容
首先,获取每个<div>
元素的文本内容,并清空其内部HTML(innerHTML = "")。
2、创建<span>
元素
然后,它遍历文本的每个字符,为每个字符创建一个新的<span>
元素,并将该字符设置为<span>
元素的文本内容。
3、设置样式
为每个<span>
元素设置外边距(marginRight),这样字符之间会有一定的间隔。
4、打乱顺序
使用shuffle函数随机打乱<span>
元素的顺序。这个函数通过Fisher-Yates算法实现随机置换。
5、应用随机变换
applyRandomTransform函数为每个<span>
元素随机生成位移(xOffset和yOffset)和旋转角度(rotation),并应用CSS的transform属性来改变每个字符的位置和方向。
6、随机颜色变化
changeColorSequentially函数逐个改变<span>
元素的颜色,每次只改变一个字符的颜色,并在颜色变化时保持顺序感。它使用getRandomColor函数生成随机颜色代码。
7、定时器
通过setInterval函数,changeColorSequentially和applyRandomTransform函数被定期调用,使得颜色和变换效果持续发生,创建动态变化的效果。
8、文本描边和阴影
在CSS中,使用-webkit-text-stroke-width和-webkit-text-stroke-color为文本添加描边效果,使用text-shadow添加阴影效果,增强文本的视觉效果。
<template>
<div>
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<HelloWorld msg="Welcome to Your Vue.js App" />
<!-- <router-view /> -->
<div class="bodys">
<div class="rugrats">高考加油!</div>
<div class="rugrats">榜上有名!</div>
<div class="rugrats">繁花似锦!</div>
</div>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
mounted() {
this.init();
},
methods: {
init() {
const divs = document.querySelectorAll(".rugrats");
divs.forEach(function (div) {
const text = div.textContent;
div.innerHTML = "";
for (let i = 0; i < text.length; i++) {
const span = document.createElement("span");
span.textContent = text[i];
span.style.marginRight = "1vw";
div.appendChild(span);
}
let spans = div.querySelectorAll("span");
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
spans = shuffle(Array.from(spans));
function getRandomValue() {
return Math.random() * 0.4 - 0.24;
}
function applyRandomTransform() {
spans.forEach(function (span) {
const xOffset = getRandomValue() * 10;
const yOffset = getRandomValue() * 15;
const rotation = getRandomValue() * 6;
span.style.transform =
"translate(" +
xOffset +
"px, " +
yOffset +
"px) rotate(" +
rotation +
"deg)";
span.style.textIndent = xOffset + "px";
});
}
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
let currentIndex = 0;
function changeColorSequentially() {
spans.forEach(function (span, index) {
let colorIndex = (index + currentIndex) % spans.length;
span.style.color =
colorIndex === 0
? getRandomColor()
: spans[colorIndex - 1].style.color;
});
currentIndex = (currentIndex + 1) % spans.length;
}
setInterval(changeColorSequentially, 250);
setInterval(applyRandomTransform, 100);
});
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.bodys {
margin: 10vh;
text-align: center;
font-size: calc(5vw + 4vh);
background: #314d79;
color: #fff;
font-family: sans-serif;
letter-spacing: -0.3vw;
overflow: hidden;
font-family: "Lacquer", system-ui;
}
.rugrats {
margin: 0 auto;
text-align: center;
}
.rugrats span {
display: inline-block;
transition: color linear 0.5s forwards;
-webkit-text-stroke-width: 0.32vw;
-webkit-text-stroke-color: black;
text-shadow: 0.4vw 0.5vw #000;
}
.rugrats span {
text-transform: capitalize;
text-transform: lowercase;
}
</style>