1.彩色滚动字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background: black;
display: flex;/*弹性布局*/
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
height:100vh;/*100%的窗口高度*/
}
h1{
font-size:112px;
color:black;
text-transform: uppercase;/*小写转大写*/
position: relative;
}
h1::after{
content: "hello world!";
color:transparent;/*设置新增的元素为透明颜色*/
position: absolute;/*设置重叠*/
left:0;
top:0;
background: linear-gradient(to right,red,pink,skyblue,saddlebrown,forestgreen,violet);
-webkit-background-clip: text;/*以文字范围裁剪背景颜色*/
/*将元素裁剪成一个圆形（100px表示圆的直径，0% 50%表示圆心的位置）*/
clip-path: circle(5000px at 0% 50%);
/*动画 时长 infinte表示无限次播放*/
animation: light infinite;
}
@keyframes light{
0%{
clip-path: circle(100px at 0% 50%);
}
50%{
clip-path: circle(100px at 100% 50%);
}
100%{
clip-path: circle(100px at 0% 50%);
}
}
</style>
</head>
<body>
<h1> hello world!</h1>
</body>
</html>
