百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

CSS3实现多彩渐变文字

myzbx 2025-01-09 14:47 54 浏览

前置知识点

:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。

在声明全局 CSS 变量时 :root 会很有用：

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}


place-items

CSS 中的 place-items 是一个简写属性 ，它允许我们在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 （例如：align-items 和 justify-items 属性）。

如果未提供第二个值，则第一个值作为第二个值的默认值。

也就是说，以后需要定义水平垂直居中的盒子就不需要再 justify-items: center 和 align-items: center 了，直接一行搞定，看起来更加专业。


background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

值

  • border-box
    背景延伸至边框外沿（但是在边框下层）。
  • padding-box
    背景延伸至内边距（padding）外沿，不会绘制到边框处。
  • content-box
    背景被裁剪至内容区（content box）外沿。
  • text Experimental
    背景被裁剪成文字的前景色。


linear-gradient()

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

其结果属于 < gradient > 数据类型，是一种特别的 < image > 数据类型。


radial-gradient()

radial-gradient() CSS 函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。

这个方法得到的是一个 CSS < gradient > 数据类型的对象，是 < image > 的一种。


实现效果大致如下：


css 样式如下：

      * {
        box-sizing: border-box;

      }
      /* :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。*/
      /* 在声明全局 CSS 变量 */
      :root {
        --color-1: #186cb8;
        --color-2: #2a9a9f;
        --color-3: #f1b211;
        --color-4: #e83611;
        --color-5: #f9002f;
      }

      .wrapper {
        background: #000;
        line-height: 1;
        min-height: 100%;
        display: grid;
        place-items: center;
        min-height: calc(100vh - 16px);
      }

      h1 {
        font-family: "Exo", sans-serif;
        font-size: 15vw;
        font-weight: 900;
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        margin: auto;
        text-transform: uppercase;

        background: linear-gradient(
          219deg,
          var(--color-1) 19%,
          transparent 19%,
          transparent 20%,
          var(--color-2) 20%,
          var(--color-2) 39%,
          transparent 39%,

          transparent 40%,
          var(--color-3) 40%,
          var(--color-3) 59%,
          transparent 59%,

          transparent 60%,
          var(--color-4) 60%,
          var(--color-4) 79%,
          transparent 79%,

          transparent 80%,
          var(--color-5) 80%
        );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }

      .container {
        padding: 1.5rem;
        text-align: center;
        background: radial-gradient(

            circle at 1.4% 1.4%,
            var(--color-1) 0.8%,
            transparent 0.8%
          ),
          radial-gradient(

            circle at 5.5% 3%,
            var(--color-2) 0.45%,
            transparent 0.45%
          ),
          radial-gradient(

            circle at 2.5% 3.5%,
            var(--color-3) 0.5%,
            transparent 0.5%
          ),
          radial-gradient(

            circle at 4.5% 1.2%,
            var(--color-4) 0.25%,
            transparent 0.25%
          ),
          radial-gradient(

            circle at 98% 98%,
            var(--color-1) 0.8%,
            transparent 0.8%
          ),
          radial-gradient(

            circle at 95% 95%,
            var(--color-2) 0.45%,
            transparent 0.45%
          ),
          radial-gradient(

            circle at 94.5% 97.5%,
            var(--color-3) 0.5%,
            transparent 0.5%
          ),
          radial-gradient(

            circle at 98.5% 95.5%,
            var(--color-4) 0.25%,
            transparent 0.25%
          );
      }

      @media screen and (min-width: 768px) {
        h1 {
          font-size: 6.5rem;
        }
      }


html 标签结构如下：

    <divclass="wrapper">
      <divclass="container">
        <h1>multi color text with css</h1>
      </div>
    </div>


小结

绘画基础图案不难，重点都在于背景颜色的绘制，重点研究下背景代码。


下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好，今天我来分享一项JavaScript的实战技巧，即如何在JS中使用Ajax进行异步请求，让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术，可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视，慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说，可以直接使用三方的监控，比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax？ajax作用是什么？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术，其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说，再熟悉不过了，像我07年接触web前端开发就是用的dreamweaver，一直用到现在，身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证，全网没有再比这更详细的Java知识点总结了，送你啊

接下来你看到的将是全网最详细的Java知识点总结，全文分为三大部分：Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点，别眨眼，从小白到大佬、零基础到精通，你绝...

福斯《死侍》发布新剧照 &quot;小贱贱&quot;韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照，其中一张是较为罕见的死侍在被改造之前的剧照，其余两张剧照都是死侍在执行任务中的状态。据外媒推测，片方此时发布剧照，预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础重点知识点：数据类型、核心语法、面向对象...

不用海淘，真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机（黄色/蓝色）扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机，此款是mini8的小黄人特别版，除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发，你是否也曾遇到过这些痛点：面对海量目标URL，单线程爬虫爬取一周还没完成任务；动态渲染的SPA页面，requests库返回的全是空白代码；好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求，取消axios请求，取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求，只能停止当前ajax请求。停止javascript的ajax请求...

一周热门
最近发表
标签列表