分享一个超炫酷的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() * 100
let y = Math.random() * 100
let h = Math.random() * 50 + 50
let w = Math.random() * 40 + 10
text.style.clipPath = `polygon(${x}% ${y}%, ${x + w}% ${y}%, ${x + w}% ${y + h}%, ${x}% ${y + h}%)`
})
}, 30);
}
}
faultText.init()
</script>
</body>
</html>