伸缩展开:通过letter-spacing调整字间距即可实现文字的伸缩展开
模糊到清晰交融:通过filter:contrast和filter:blur实现
效果图:
代码示例:
html, body {
height: 100%;
width: 100%;
background-color: black;
}
.container {
width: 100%;
height: 100%;
position: relative;
padding: 2em;
filter: contrast(20);
background-color: black;
overflow: hidden;
}
h1 {
font-family: Righteous;
color: white;
font-size: 4rem;
text-transform: uppercase;
line-height: 1;
animation: letterspacing 5s infinite alternate ease-in-out;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
letter-spacing: -2.2rem;
}
@keyframes letterspacing {
0% {
letter-spacing: -2.2rem;
filter: blur(.5rem);
}
50% {
filter: blur(.5rem);
}
100% {
letter-spacing: .5rem;
filter: blur(0rem);
color: #fff;
}
}
<div class="container">
<h1>Blur word Animation</h1>
</div>