【css】实现渐变文字效果(linear-gradient&radial-gradient)

效果图

实现方法

关键代码:

javascript 复制代码
    background: linear-gradient(0deg,#d3ae13 0%,white 44%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

注释掉:-webkit-background-clip: text;这行之后,下图就是待叠加的样式。(有点类似PS的蒙版或者图层叠加之类的)

linear-gradient

linear-gradient() 是CSS的一个渐变函数,用于在元素的背景中创建线性渐变效果。它可以让你在元素的背景中实现从一种颜色到另一种颜色的平滑过渡。

  • 该函数可以接受多个参数,其中最重要的是方向颜色

    • 方向参数可以指定渐变的方向。
      • 使用角度值(如45deg表示从左上角到右下角)
      • 关键词(如to right表示从左到右)来定义方向。例如:
    • 颜色参数可以指定渐变的起始颜色和结束颜色,也可以包含中间的颜色位置。
      • 你可以使用具体的颜色值(如红色、#ff0000)
      • 使用颜色关键词(如red、blue)来定义颜色。你还可以通过设置百分比或距离值来指定中间颜色的位置。例如:
javascript 复制代码
background: linear-gradient(red, yellow 50%, green);

此示例将创建一个从红色到绿色的渐变,中间经过黄色,黄色占据整个渐变的50%位置。

通过构建背景图学习CSS径向渐变

补充一个径向渐变的教程,用来做一些平铺背景还是蛮好看和实用的。

参考

用css实现文字字体颜色渐变的三种方法 不知道为什么使用 background-clip 这个属性时不能生效。所以没有用这个方法。

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript