大家好,我是冲击大厂的小韩,这次给大家带来一个小案例,做一个文字刷漆效果的html页面。话不多说,直接上代码.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
user-select: none;
font-family: 'MicrosoftYaHeiUI';
}
body{
background-color: black;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.info{
color: white;
font-size: 8vw;
font-weight: 550;
white-space: nowrap;
position: relative;
}
/* 不一定非要使用after伪元素, 使用宽高相等的子元素进行决定定位也可以 */
.info::after{
content: "你好, 我是Mikaisa";
font-size: 8vw;
color: greenyellow;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
white-space: nowrap;
animation: ani 5s linear infinite;
}
@keyframes ani{
0%{
width: 0;
text-shadow: none;
}
100%{
width: 100%;
border: none;
}
}
</style>
</head>
<body>
<div class="info">
你好, 我是Mikaisa
</div>
</body>
</html>
效果演示
思路讲解
思路其实就是搞两个盒子, 里面的文字相同,使用绝对定位让外层盒子覆盖内层盒子,然后给外层盒子的文字设置为别的颜色,通过动画让外层盒子的宽度由0变为100%,从而实现了一个比较简单的刷漆效果。当然,你也可以加些text-shadow什么的,让整个效果更加的绚丽。
注意事项
使用white-space让文字不要换行,且要根据文字的多少,自己去设置font-size,防止溢出。最后要注意这个案例只是一个小的炫技,并不适合搞太多文字。
本人其他平台账号
知乎: Mikaisa,https://www.zhihu.com/people/whitewindmill-95
gitee码云: @mikaisazzz,https://gitee.com/mikaisazzz
觉得不错还请点个赞呗,有啥建议或者看法都欢迎评论或者私信,但是还请温柔的表达呀!