分享一个超炫酷的css开场动画

源码

<!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>@media (max-width: 1000px) {html{display: none;}}*{padding: 0;margin: 0;}html{background-color: black;}.container{width: 100vw;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}.text{font-size: 15vh;font-weight: 1000;font-family: Impact;user-select: none;cursor: pointer;position: absolute;color: white;letter-spacing: 2.0vh;}.testMove::after,.testMove::before{content: "CONTEXT";position: absolute;left: 0;top: 0;mix-blend-mode: screen;}.testMove::before{color: blue;transform: translateX(-10px);}.testMove::after{color: red;transform: translateX(10px);}</style>
</head>
<body><div class="container"><p class="text" onclick="faultText.change()">CONTEXT</p><p class="text" onclick="faultText.change()">CONTEXT</p><p class="text" onclick="faultText.change()">CONTEXT</p><p class="text" onclick="faultText.change()">CONTEXT</p></div><script>const faultText = {player: {},init(){this.textArr = [...document.getElementsByClassName("text")]},textArr: [],change(){setTimeout(() => {clearInterval(this.player)this.textArr.forEach((item) => {item.classList.remove("testMove")item.style.clipPath = ''item.style.transform = ''})}, 2000);this.player = setInterval(() => {this.textArr.forEach((text) => {text.classList.add('testMove')text.style.transform = `translate(${Math.random()*60-30}%,${Math.random()*60-30}%)`let x = Math.random() * 100let y = Math.random() * 100let h = Math.random() * 50 + 50let w = Math.random() * 40 + 10text.style.clipPath = `polygon(${x}% ${y}%, ${x + w}% ${y}%, ${x + w}% ${y + h}%, ${x}% ${y + h}%)`})}, 30);}}faultText.init()</script>
</body>
</html>