使用css实现的一个文字特效
html代码
<div class="box">
<h1>Hello World</h1>
</div>
css代码
html,
body {
margin: 0;
padding: 0;
/* 内外边距为0 */
height: 100%;
width: 100%;
/* 宽高100% */
background-color: black;
/* 黑色背景 */
}
.box {
width: 100%;
height: 100%;
/* 宽高可以随意设置 */
position: relative;
/* 相对定位 */
filter: contrast(20);
/* 滤镜,实现内凹 */
background-color: black;
/* 黑色背景,建议给与body一样的背景颜色 */
overflow: hidden;
/* 溢出隐藏 */
}
h1 {
color: white;
font-size: 4rem;
/* 字体颜色大小 */
text-transform: uppercase;
/* 文字转大写 */
animation: dh 3.5s infinite alternate ease-in-out;
/* 动画效果 来回循环由快到慢*/
display: block;
position: absolute;
left: 50%;
top: 50%;
/* 绝对定位 */
transform: translate(-50%, -50%);
/* 平移,用于元素水平垂直居中 */
letter-spacing: -2.2rem;
/* 定义字符间距 */
}
@keyframes dh {
0% {
letter-spacing: -2.4rem;
filter: blur(0.3rem);
/* 滤镜,模糊效果 */
}
50% {
filter: blur(0.5rem);
}
100% {
letter-spacing: 0.5rem;
filter: blur(0rem);
color: #fff;
}
}
由于比较简单,不做过多解释,谢谢观赏
文字融合.gif
完整代码
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: black;
}
.box {
width: 100%;
height: 100%;
position: relative;
filter: contrast(20);
background-color: black;
overflow: hidden;
}
h1 {
color: white;
font-size: 4rem;
text-transform: uppercase;
animation: dh 3.5s infinite alternate ease-in-out;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
letter-spacing: -2.2rem;
}
@keyframes dh {
0% {
letter-spacing: -2.4rem;
filter: blur(0.3rem);
}
50% {
filter: blur(0.5rem);
}
100% {
letter-spacing: 0.5rem;
filter: blur(0rem);
color: #fff;
}
}
</style>
</head>
<body>
<div class="box">
<h1>Hello World</h1>
</div>
</body>
