色相旋转文字 · 文字
前端Wiki/CSS 特效合集/色相旋转文字

色相旋转文字

filter 色相 360 度循环，一个色值变出全套颜色

← 返回 文字 类特效列表
COLOR CYCLE

上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .hue{text-align:center;font-size:46px;font-weight:800;margin:50px 0;color:#4a9eff;text-shadow:0 0 18px rgba(74,158,255,.6);animation:kfx-hue 5s linear infinite}
@keyframes kfx-hue{to{filter:hue-rotate(360deg)}}

HTML 结构

HTML
<div class="fx">
<div class="hue">COLOR CYCLE</div>
</div>
实现要点：filter:hue-rotate 线性循环即可让任何颜色流转

其它文字类特效

文字渐变文字文字空心描边文字文字3D 悬浮文字文字打字机效果文字文字逐字浮现文字彩虹流动文字
回到 前端Wiki 首页 · CSS 特效合集