【CSS文字渐变动画】

CSS文字渐变动画

HTML代码

html 复制代码
<div class="title">
  <h1>今天是春分</h1>
  <p>正是春天到来的日子,花都开了,小鸟也飞回来了,大山也绿了起来,空气也有点嫩嫩的气息了</p>
</div >

CSS代码

css 复制代码
@property --@color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(98 100% 62%);
}

@property --@color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(204 100% 59%);
}

@keyframes gradient-change {
  to {
    --@color-1: hsl(210 100% 59%);
    --@color-2: hsl(310 100% 59%);
  }
}

.title {
  animation: gradient-change 2s linear infinite alternate;
  
  background: linear-gradient(
    to right in oklch, 
    var(--@color-1), 
    var(--@color-2)
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

效果图

相关推荐
liangshanbo12153 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15885 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_5 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15886 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo7 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li7 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊9 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz10 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom10 小时前
iframe实战:跨域通信与安全隔离
前端·安全