目录
1. 页面效果
2. 完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>发光文字</title>
<style type="text/css">
*{
/* 初始化，取消内外边距 */
margin:0;
padding:0;
/* 设置的边框和内边距的值是包含在总宽高内的 */
box-sizing:border-box;
}
body{
/* 弹性布局，水平垂直剧中 */
display:flex;
justify-content:center;
align-items:center;
/* 100%窗口高度 */
height:100vh;
background-color:#000000;
}
h2{
font-size:96px;
color:#666666;
text-transform:uppercase;
letter-spacing:5px;
cursor:pointer;
}
h2 span{
transition:0.5s;
}
h2:hover span:nth-child(1){
margin-right:10px;
}
h2:hover span:nth-child(1)::after{
content:"";
}
h2:hover span:nth-child(2){
margin-left:40px;
}
h2:hover span{
color:#FFFFFF;
/* 文字发光阴影 */
text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 40px #fff,0 0 80px #fff;
}
</style>
</head>
<body>
<h2>
<span>i'</span>m<span>coming</span>
</h2>
</body>
</html>