从特效入手，深入了解CSS（三）：组合文字颜色

最新推荐文章于 2024-06-17 16:03:11 发布

黑猫几绛

最新推荐文章于 2024-06-17 16:03:11 发布

阅读量752

点赞数 2

分类专栏： css 文章标签： html css3 css

本文链接：https://blog.csdn.net/flow_camphor/article/details/124242269

版权

CSS3 background-clip conic-gradient 渐变文字兼容性处理

关键词由CSDN通过智能技术生成

css 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

不建议跳跃阅读！
这篇文章将从头开始介绍如何实现一个特效
中间偶尔会穿插一些css3或平时接触不多的css属性

首先看一看这一期的特效：

HTML部分

<h1 class="gradient-text">Welcome! 黑猫几绛！<h1></h1>

CSS部分

前面两期我们使用的是grid布局的方式让元素在页面上垂直水平居中，这一期使用flex布局：

body {
    height: 100vh;
    width: 100vw;
    background-color: #FBF8F1; 
    display: flex;
    align-items: center;
    justify-content: center;
}

然后为h1文字设置基本样式：

h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 15vmin;
    line-height: 20vmin;
}

好，现在我们来为文字添加一些样式。

background-clip

平时为文字添加颜色样式时，可能直接使用color属性进行设置，此时设置的颜色是单调的。

思路：我们可以将文字设为透明字体，为文字所在的区域设置花样的背景颜色，最后通过使用background-clip:text对背景进行裁剪，仅仅留下文本部分的背景即可。

按照这个思路来进行一些编码：

.gradient-text {
    color: transparent;
    background: #f79f51;
    background-size: 50%;
    background-clip: text;  
    -webkit-background-clip: text;
}

看一看效果：

很好！样式成功的展示出来了！

如果说我们想要一种渐变色的文字，改变渐变的背景颜色即可：

.gradient-text {
    color: transparent;
    background: linear-gradient(45deg, #f79f51, #efff96);
    background-size: 50%;
    background-clip: text;  
    -webkit-background-clip: text;
}

看一看效果：

注意：background-clip: text的兼容性并不好，所以如果浏览器不兼容该属性，所有的背景区域都会直接显示出来。

还是上面的代码，通过ie打开文件的话，样式就会很扭曲：

为了避免这样不兼容的情况发生，我们可以采用css的特征检测选择器@supports

@supports CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。

.gradient-text {
    color: #f79f51; 
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .gradient-text {
        color: transparent;
        background: linear-gradient(45deg, #f79f51, #cde446);
        background-size: 50%;
        background-clip: text;  
        -webkit-background-clip: text;
    }  
}

此时在ie中就可以显示默认设置的color: #f79f51;，chrome中显示的则是渐变的背景颜色。

其实在写特效时候，非常注重兼容性的问题，总不能说我们写出来了某种特效，在自己的浏览器上可以成功展示，但是在其他人访问时看起来非常的扭曲，所以可以访问这个网站：can i use来看看，浏览器可以支持哪些属性。

现在来试试为文字背景设置更好看的背景颜色，不过在这之前还需要了解一个属性。

conic-gradient

较为常见的渐变色有linear-gradient(线性渐变)、radial-gradient(径向渐变)，这次介绍的conic-gradient是圆锥渐变，它渐变的起始点是图形中心，渐变方向以顺时针方向绕中心旋转实现渐变效果。

语法：

conic-gradient( [ from ]? [ at ]?, )

可以看出锥形渐变由3部分组成：

起始角度
中心位置
角渐变断点

这里引用张鑫旭大神的博客来介绍：

起始角度和中心位置都是可以省略的，因此，最简单的锥形渐变用法如下，使用我最爱的深天空蓝色：
.example {
    width: 300px; height: 150px;
    background-image: conic-gradient(white, deepskyblue);
}
效果如下图所示：

上图具体渲染的细节我专门做了个图标注了下，方便大家学习，如下所示：

上面的原理示意图究竟正不正确呢？

我们不妨修改几个参数值，例如改变下起始角度和中心位置，看看锥形渐变效果是怎样的，例如：
conic-gradient(from 45deg at 25% 25%, white, deepskyblue);
结果渐变起始角度改成45度，中心点位置移动到相对元素左上角25%的位置，效果如下图所示。

锥形渐变的颜色断点

锥形渐变的颜色断点数据类型是<angular-color-stop-list>，顾名思义是角颜色断点列表，有别于线性渐变和径向渐变的断点列表，使用的是角度值，而非长度值。

例如：
conic-gradient(white, deepskyblue 45deg, white);
deepskyblue 45deg这里使用的是'45deg'是个角度值，于是仰望鑫空间，可以明显看到2点钟方向的颜色最深。

需要注意的是，角渐变断点中设置的角度值是一个相对角度值，最终渲染的角度值是和起始角度累加的值，例如：
conic-gradient(from 45deg, white, deepskyblue 45deg, white);
此时deepskyblue实际渲染的坐标角度是90deg（45deg + 45deg），效果如图下图所示，可以明显看到3点钟方向的颜色最深。

知道这些就可以了，现在我们利用刚刚学到的练练手，动手实现一下饼状图：

.round{
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    /**
    *	首先从竖直方向顺时针转动40% * 360deg，这片区域为紫色
    *	然后从 40% * 360deg + 0deg 开始顺时针转动 40% * 360deg，这片区域为粉色
    *   最后从 40% * 360deg + 0deg + 0deg 开始开始顺时针转动，这片区域为蓝色
    */
    background: conic-gradient(#BAABDA 40%, #FFCBCB 0deg 75%, #B5DEFF 0deg);  
}

看一看效果：

其实在实现了这个饼状图后发现，这个和我们这期的特效配色已经非常接近了，向元素中多添加一些颜色后就可以实现本期特效：

.gradient-text {
    color: transparent;
    background: conic-gradient(
        #D9D7F1 12%, 
        #BAABDA 12%, #BAABDA 33%, 
        #E7FBBE 33%, #E7FBBE 55%, 
        #FFCBCB 55%, #FFCBCB 70%, 
        #B5DEFF 70%, #B5DEFF 87%, 
        #F7D1BA 87%);
    background-size: 50%;
    background-clip: text;  
    -webkit-background-clip: text;
}

搞定，看看最终的效果吧：

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 100vh;
      width: 100vw;
      background-color: #FBF8F1; 
      display: flex;
      align-items: center;
      justify-content: center;
    }

    h1 {
      font-family: 'Poppins', sans-serif;
      font-size: 15vmin;
      line-height: 20vmin;
    }

    .gradient-text {
        color: transparent;
        background: conic-gradient(
            #D9D7F1 12%, 
            #BAABDA 12%, #BAABDA 33%, 
            #E7FBBE 33%, #E7FBBE 55%, 
            #FFCBCB 55%, #FFCBCB 70%, 
            #B5DEFF 70%, #B5DEFF 87%, 
            #F7D1BA 87%);
        background-size: 50%;
        background-clip: text;  
        -webkit-background-clip: text;
    }
  </style>
</head>
<body>
  <h1 class="gradient-text">Welcome! 黑猫几绛！<h1></h1>
</body>
</html>

思考

这一期中我们学到了conic-gradient，根据圆锥渐变的效果，可以实现仪表盘的设计吗？

提示：会用到上一期介绍过的transform-origin属性

效果如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
        position: relative;
        margin: 50px auto;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%);
        transform: rotate(-112.5deg);
        transform-origin: 50% 50%;
    }
      
    .bg::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: #fff;
    }
      
    .bg::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background:
            radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
            conic-gradient(#f1462c 0, #f1462c 12.5%, #fba73e 12.5%, #fba73e 25%, #e0fa4e 25%, #e0fa4e 37.5%, #12dd7e 37.5%, #12dd7e 50%, #0a6e3f 50%, #0a6e3f 62.5%, #fff 62.5%, #fff 100%);  
    }
  </style>
</head>
<body>
  <div class="bg"></div>
</body>
</html>

黑猫几绛

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
从特效入手，深入了解CSS（三）：组合文字颜色

不建议跳跃阅读！这篇文章将从头开始介绍如何实现一个特效中间偶尔会穿插一些css3或平时接触不多的css属性首先看一看这一期的特效：HTML部分<h1 class="gradient-text">Welcome! 黑猫几绛！<h1></h1>CSS部分前面两期我们使用的是grid布局的方式让元素在页面上垂直水平居中，这一期使用flex布局：body { height: 100vh; width: 100vw; backgrou.
复制链接

扫一扫

专栏目录