html文字特效
Posted 本站大佬
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html文字特效相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: relative;
width: 100%;
height: 100vh;
background: #111;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
h2{
font-size: 10em;
color: #fff;
text-transform: uppercase;
text-align: center;
display: flex;
}
h2 span{
transition: 0.4s;
}
h2:hover span{
filter: blur(20px);
opacity: 0;
transform: scale(-2);
}
h2 span:nth-child(10n+1){
transition-delay: 0s;
}
h2 span:nth-child(10n+2){
transition-delay: 0.1s;
}
h2 span:nth-child(10n+3){
transition-delay: 0.2s;
}
h2 span:nth-child(10n+4){
transition-delay: 0.3s;
}
h2 span:nth-child(10n+5){
transition-delay: 0.4s;
}
h2 span:nth-child(10n+6){
transition-delay: 0.5s;
}
h2 span:nth-child(10n+7){
transition-delay: 0.6s;
}
h2 span:nth-child(10n+8){
transition-delay: 0.7s;
}
h2 span:nth-child(10n+9){
transition-delay: 0.8s;
}
</style>
</head>
<body>
<section>
<h2>
<span>W</span>
<span>s</span>
<span>w</span>
<span>t</span>
<span>l  </span>
<span>W</span>
<span>s</span>
<span>h</span>
<span>r</span>
</h2>
</section>
</body>
</html>
以上是关于html文字特效的主要内容，如果未能解决你的问题，请参考以下文章