1. 实现效果:
2.实现代码:
利用css filter: contrast() 修改对比度 ;
利用css filter: blur() 控制模糊度
style>
*{
margin: 0;
padding: 0;
}
.context{
background-color: black;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
filter: contrast(30);
}
.text{
font-size: 80px;
color: #fff;;
animation: showup 3s forwards;
}
@keyframes showup {
from{
letter-spacing: -63px;
filter: blur(10px);
}
to{
letter-spacing: 3px;
filter: blur(1px);
}
}
</style>
<body>
<div class="context">
<span class="text">知识就在得到 !</span>
</div>
</body>