前言：
如今各位老铁们对“css文字点”大体比较看重，同学们都想要剖析一些“css文字点”的相关内容。那么小编也在网上搜集了一些对于“css文字点””的相关内容，希望姐妹们能喜欢，各位老铁们一起来了解一下吧！第一步：实现彩虹渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...：用于指定渐变的起止颜色。
通过background-image: linear-gradient，实现背景渐变。
第二步：背景裁切，文字透明
-webkit-background-clip:text
以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。目前只有chrome支持。
color: transparent; 文字颜色透明第三步：使动画动起来
@keyframes sliding { to { background-position: -2000vw; } }animation: sliding 100s linear infinite;keyframes改变背景位置，无限循环，实现滚动时序效果
1、@keyframes animationname {keyframes-selector {css-styles;}}
值
说明
animationname
必需的。定义animation的名称。
keyframes-selector
必需的。动画持续时间的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
注意： 您可以用一个动画keyframes-selectors。
css-styles
必需的。一个或多个合法的CSS样式属性
2、animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值
说明
animation-name
指定要绑定到选择器的关键帧的名称
animation-duration
动画指定需要多少秒或毫秒完成
animation-timing-function
设置动画将如何完成一个周期
animation-delay
设置动画在启动前的延迟间隔。
animation-iteration-count
定义动画的播放次数。
animation-direction
指定是否应该轮流反向播放动画。
animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state
指定动画是否正在运行或已暂停。
完整代码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>彩虹字</title> <style> html, body { height: 100%; background-color: #000; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } h1 { font-size: 200px; text-align: center; background-image: linear-gradient( to right, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered ); background-size: 110vw; animation: sliding 100s linear infinite; -webkit-background-clip: text; color: transparent; } @keyframes sliding { to { background-position: -2000vw; } } </style> </head> <body> <h1>这是一段彩虹字</h1> </body></html> 标签： #css文字点
