CSS 高级✍️ CSS3 的线性渐变、径向渐变

2022-04-08 | 2024-05-07 | 1.7k | 9 分钟

线性渐变

渐变方向

语法：

linear-gradient(direction, color-stop1, color-stop2, ...color-stopN);

示例代码：

<head>
  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #grad1 {
        height: 100px;
        width: 200px;
        background-color: red;
        /* 浏览器不支持时显示 */
        background-image: linear-gradient(#e66465, #9198e5);
    }
    #grad2 {
        height: 100px;
        width: 200px;
        background-color: red;
        /* 不支持线性的时候显示 */
        background-image: linear-gradient(to right, red, yellow);
    }
    #grad3 {
        height: 100px;
        width: 200px;
        background-color: red;
        /* 不支持线性的时候显示 */
        background-image: linear-gradient(to bottom right, red, yellow);
    }
  </style>
</head>
<body>
  <!-- 从上到下的线性渐变： -->
  <div id="grad1"></div>

  <!-- 从左到右的线性渐变： -->
  <div id="grad2"></div>

  <!-- 从左上角到右下角的线性渐变 -->
  <div id="grad3"></div>
</body>

效果展示

使用角度

若想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

语法

linear-gradient(angle, color-stop1, color-stop2, ...color-stopN);

示例代码：

<head>
  <style>
    #grad4 {
      height: 100px;
      background-color: red;
      width: 500px;
      /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(0deg, red, yellow,pink);
    }
    #grad5 {
      height: 100px;
      background-color: red;
      width: 500px;
      /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(90deg, red, yellow,pink);
    }
    #grad6 {
      height: 100px;
      background-color: red;
      width: 500px;
      /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(180deg, red, yellow,pink);
    }
    #grad7 {
      height: 100px;
      background-color: red;
      width: 500px;
      /* 浏览器不支持的时候显示 */
      background-image: linear-gradient(-90deg, red, yellow,pink);
    }
  </style>
</head>
<body>
  <div id="grad4" style="text-align:center;">0deg</div><br>
  <div id="grad5" style="text-align:center;">90deg</div><br>
  <div id="grad6" style="text-align:center;">180deg</div><br>
  <div id="grad7" style="text-align:center;">-90deg</div>
</body>

效果展示：

0deg

90deg

180deg

-90deg

使用透明度

示例代码：

<head>
  <style>
    #grad8 {
      height: 200px;
      width: 500px;
      background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    }
  </style>
</head>
<body>
  <div id="grad8"></div>
</body>

效果展示：

重复的线性渐变

示例代码：

<head>
  <style>
    #grad9 {
      height: 200px;
      background-color: red;
      /* 浏览器不支持的时候显示 */
      /* 0 - 7% -10% 重复 */
      background-image: repeating-linear-gradient(45deg, red, yellow 7%, green 10%);
    }
  </style>
</head>
<body>
  <div id="grad9"></div>
</body>

效果展示：

径向渐变

径向渐变（Radial Gradients）- 由它们的中心定义

示例代码

<style>
  .pdiv {
    display: flex;
  }
  .pdiv > div {
      width: 200px;
      height: 200px;
      margin: 20px;
      flex: 1;
  }
  .box1 {
      background: radial-gradient(#e66465, #9198e5);
  }
  .box2 {
      background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
  }
  .box3 {
      background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
  }
  .box4 {
      background: radial-gradient(ellipse at top, #e66465, transparent),
          radial-gradient(ellipse at bottom, #4d9f0c, transparent);
  }
</style>
<div class="pdiv">
  <!-- 颜色A - B 渐变 -->
  <div class="box1"></div>
  <!-- 颜色A - B 渐变(渐变的边缘形状与容器距离渐变中心点最近的一边相切) -->
  <div class="box2"></div>
  <!-- 颜色A - B 渐变(圆形（渐变的形状是一个半径不变的正圆）) -->
  <div class="box3"></div>
  <!-- 颜色A - B 渐变(椭圆形（轴对称椭圆）) -->
  <div class="box4"></div>
</div>

效果展示

案例

发廊灯

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #wrap {
            width: 40px;
            height: 200px;
            border: 1px solid;
            margin: 10px auto;
            overflow: hidden;
        }
        #wrap>.inner {
            height: 600px;
            background: repeating-linear-gradient(135deg, black 0px, black 10px, white 10px, white 20px);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="inner"></div>
    </div>
</body>
<script type="text/javascript">
    var inner = document.querySelector("#wrap > .inner");
    var flag = 0;
    setInterval(function () {
        flag++;
        if (flag == 300) {
            flag = 0;
        }
        inner.style.marginTop = -flag + "px";
    }, 1000 / 60)
</script>
</html>

光斑动画

<style type="text/css">
  #section1 {
    background: black;
    text-align: center;
  }

  #h1 {
    /* transition: 3s; */
    height: 100px;
    line-height: 100px;
    display: inline-block;
    color: rgba(255, 255, 255, .3);
    font: bold 80px "微软雅黑";
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 1) 180px, rgba(255, 255, 255, 0) 260px);
    background-repeat: no-repeat;
    /* 以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉 */
    -webkit-background-clip: text;
    animation: test 3s ease infinite;
  }

  @keyframes test {
    0% {
      background-position: -100px 0;
    }

    100% {
      background-position: 500px 0;
    }
  }
</style>
<section id="section1">
  <div id="h1">hello world</div>
</section>

hello world

渐变的倒影

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        img {
            -webkit-box-reflect: right 0px linear-gradient(-90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
        }
    </style>
</head>
<body>
    <img src="meimei.jpg" class="lazy-load" width="400" height="auto" />
</body>
</html>

打赏作者

您的打赏是我前进的动力

微信

支付宝

CSS 高级✍️ CSS3 的 animation 动画

CSS 高级✍️ CSS3 的 transform 变形

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 线性渐变
2. 径向渐变
3. 案例