CSS3渐变

最新推荐文章于 2023-10-18 09:05:41 发布
最新推荐文章于 2023-10-18 09:05:41 发布
阅读量834 收藏 3
点赞数
文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52629158/article/details/130040804
版权

CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

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

注意：IE8 及更早版本的 IE 浏览器不支持该属性。

注意：我们在使用渐变背景设置的使用，需要在 渐变的前面添加 浏览器的内核标识码 -webkit- , -o-, -moz-, -ms-

1.1.1 线性渐变

线性渐变(linear gradients)沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变。

语法：

background:linear-gradient(direction,color-stop1,color-stop2,……);

1.1.1.1 线性渐变从上到下(默认)

   <style>
        .box{
            width: 350px;
            height: 200px;
            background-image: -webkit-linear-gradient(to bottom, red,blue);
            background-image: -moz-linear-gradient(to bottom, red,blue);
            background-image: -o-linear-gradient(to bottom, red,blue);
            background-image: -ms-linear-gradient(to bottom, red,blue);
            background-image: linear-gradient(to bottom, red,blue);
        }
    </style>
</head>
<body>
    <div class="box box1"></div>

 

注意：

 background-image: linear-gradient(to bottom, red,blue);
 /* to bottom 可以省略不写，因为 线性渐变 (默认) 是 从上到下 拉渐变 */
/*简写*/
 background-image: linear-gradient(red,blue);

 1.1.1.2 线性渐变从下到上

      .box2{
            background-image: linear-gradient(to top, red,blue);
        }

1.1.1.3 线性渐变从左到右

    .box3{
            background-image: linear-gradient(to right, red,blue);
        }

 

1.1.1.4 线性渐变从右到左

   .box4{
            background-image: linear-gradient(to left, red,blue);
        }

 

1.1.1.5 线性渐变对角

语法：

background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,……);

 

对角--- 向 左上角 拉渐变

小提示：线性渐变对角时关键字的顺序无关紧要，“to left top”与“to top left”相同。

.box5{
            background-image: linear-gradient(to left top, red,blue,green);
        }

对角--- 向 左下角 拉渐变

background-image: linear-gradient(to left bottom, red,blue,green);

 

对角--- 向 右上角 拉渐变

 background-image: linear-gradient(to right top, red, blue, green);

 

对角--- 向 右下角 拉渐变

background-image: linear-gradient(to right bottom, red, blue, green);

 

1.1.1.6 线性渐变-使用角度

语法：

background:linear-gradient(angle,color-stop1,color-stop2,……);

 

90deg创建一个从左到右的渐变：

     .box6{
            background-image: linear-gradient(90deg, red,blue);
        }

 

1.1.1.7 线性渐变-色标点区域

根据效果图，补充代码，实现元素的背景颜色在水平方向上发生渐变，其中：

(1)0%-20%处，颜色是红色全透明

(2)20%-50%处，颜色是从白色渐变到红色

(3)50%-90%处，颜色从红色渐变到绿色，其中绿色的透明度是0.7

 

<style>
        .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 0;
            border: 1px solid black;
            /* 渐变，至少要有2个颜色，才能形成渐变！ */
            /* 0%-20%处，颜色是红色全透明----表达的意思是：渐变的颜色是红色全透明 */
            /* 20%-50%,  颜色从白色渐变到红色*/
            /* 50%-90%，颜色从红色渐变到绿色，其中绿色的透明度是0.7 */
            background-image: linear-gradient(to right,rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0,0.7) 90%);
        }
    </style>
</head>
<body>
    <div class="box"></div>

 

0%-20%处，颜色是红色全透明----表达的意思是：渐变的颜色是红色全透明

rgba(255,0,0,0) 20%,

 20%-50%处，颜色是从白色渐变到红色----表达的意思是：渐变的颜色是红色，颜色没有透明度

rgba(255,0,0,1) 50%

50%-90%处，颜色从红色渐变到绿色，其中绿色的透明度是0.7

rgba(0,255,0,0.7) 90%

预览：

1.1.1.8 线性渐变-重复渐变

重复的线性渐变

语法：

background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage,……);

 

    <style>
        .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 0;
            border: 1px solid black;
        
            background-image: repeating-linear-gradient(to right, red 0%, blue 50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>

 预览：

线性渐变，重复显示。其中蓝色 在整个区域的50%处显示。

如果你把 blue 设置为 blue 30%，表示 蓝色在整个区域的30%处显示。观察 重复显示的 第一片区域。

1.1.2 径向渐变(放射性渐变)

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

 

 

特别注意： shape size at position,   这几个值的设置，都是在 逗号前面的。 每个设置之间用 空格 间隔。

1.1.2.1 at position起点

at position起点：中心点的位置，可以是关键字（水平方向--left,center,right, 垂直方向--top,center,bottom），具体数值或百分比。

如果这个参数省略了，其默认值为“center”。

注意：

渐变的中心是 center（表示在中心点），中心点不同，形成的效果 各不相同。

中心点可以用关键字：

    <style>
        .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 20px;
            border: 1px solid black;

        }
        .box1{
            background-image: radial-gradient(circle at left top, red, blue,pink,green);
        }

        .box2{
            background-image: radial-gradient(circle at left center, red, blue,pink,green);
        }

        .box3{
            background-image: radial-gradient(circle at left bottom, red, blue,pink,green);
        }

        .box4{
            background-image: radial-gradient(circle at center top, red, blue,pink,green);
        }

        .box5{
            background-image: radial-gradient(circle at center center, red, blue,pink,green);
        }

        .box6{
            background-image: radial-gradient(circle at center bottom, red, blue,pink,green);
        }

        .box7{
            background-image: radial-gradient(circle at right top, red, blue,pink,green);
        }

        .box8{
            background-image: radial-gradient(circle at right center, red, blue,pink,green);
        }

        .box9{
            background-image: radial-gradient(circle at right bottom, red, blue,pink,green);
        }
    </style>
</head>
<body>
    <div class="box box1"></div>

    <div class="box box2"></div>

    <div class="box box3"></div>

    <div class="box box4"></div>

    <div class="box box5"></div>

    <div class="box box6"></div>

    <div class="box box7"></div>

    <div class="box box8"></div>

    <div class="box box9"></div>
</body>

 

中心点还可以用百分比：

percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。

<style>        
	.box10{
            background-image: radial-gradient(circle at 60% 50%, red, blue,pink,green);
        }
    </style>
<div class="box box10"></div>

 中心点在 水平方向 60%，垂直方向50% 那个点上，预览如下图所示：

中心点还可以用数值：

length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。

 <style>        
	.box11{
            background-image: radial-gradient(circle at 200px 200px, red, blue,pink,green);
        }
    </style>
<div class="box box11"></div>

 

1.1.2.2 shape形状

shape形状： ellipse、circle；

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

 <style>
          .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 0;
            border: 1px solid black;
            background-image: radial-gradient(ellipse at center center,red,blue,pink,green);
          
          }
    </style>
</head>
<body>
    <div class="box"></div>

 

 <style>
          .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 0;
            border: 1px solid black;
            background-image: radial-gradient(circle at center center,red,blue,pink,green);
          }
    </style>
</head>
<body>
    <div class="box"></div>

 

1.1.2.3 size大小

size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，

径向渐变的半径长度：是从中心点 到 你拉渐变 结束的那个点，这之间的长度，就叫径向渐变的半径长度。如下图所示：

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。主要有：

farthest-corner (最远的角落)，closest-corner (最近的角)，farthest-side (最远的端)，closest-side (最近端)。

  • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角。渐变的大小是 farthest-corner (最远的角落)

  • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边。 (最近端)

  • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角。(最近的角)

  • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边。(最远的端)

  • contain(包含) : 使元素放大渐变，直到它被完全包含，而不会被元素的边界切掉任何渐变。

  • cover(覆盖) : 将导致梯度放大，直到它覆盖元件的整个区域。

（白话理解：径向渐变的半径长度 就是 指 你从哪 到 哪 拉渐变。）

 <style>
        .box{
            width: 1200px;
            height: 400px;
            margin: 20px auto 20px;
            border: 1px solid black;

        }
        .box1{
            background-image: radial-gradient(circle farthest-corner at 60% 55%, red, blue,pink,green);
        }

        .box2{
            background-image: radial-gradient(circle closest-corner at 60% 55%, red, blue,pink,green);
        }

        .box3{
            background-image: radial-gradient(circle farthest-side at 60% 55%, red, blue,pink,green);
        }

        .box4{
            background-image: radial-gradient(circle closest-side at 60% 55%, red, blue,pink,green);
        }
    </style>
</head>
<body>
    <div class="box box1"></div>

    <div class="box box2"></div>

    <div class="box box3"></div>

    <div class="box box4"></div>

 

补充：

Autoprefixer---VScode自动补全CSS3前缀插件

把下面这段内容，添加在 autoprefixer:options 在setting.json中编辑里：

    "autoprefixer.options": {
        "browsers":[
            "ie >= 6",
            "firebox >= 8",
            "chrome >= 24",
            "Opera >= 10",
            "last 2 versions",
            "> 5%"
        ]
    },

 

div{    
    width: 500px;     
    height:500px;     
    margin:10px;     
    background: -webkit-linear-gradient(top,red,white,blue);     
    background: -moz-linear-gradient(top,red,white,blue); 
}

 径向渐变

div{    
    width: 500px;     
    height:500px;     
    margin:10px;     
    background: -webkit-radial-gradient(50% 50%,black,white,blue);     
    background: -moz-radial-gradient(50% 50%,black,white,blue); 
}

 重复径向渐变

div{    
    width:200px;     
    height:200px;     
    padding: 20px;                     
    background:-webkit-repeating-radial-gradient(circle contain,#f00,#ff0 10%,#f00 15%) 
}

 

仙鹤__
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3渐变色
fine1998_的博客
05-09 2万+
作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类：分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction属性值： to bottom 默认值，从上到下 to top 从左到右 to left
纯css3渐变进度条动画特效
07-24
在本案例中，我们关注的是一个使用纯CSS3实现的渐变进度条动画特效。这个特效利用了CSS3的背景属性和动画特性，为网页界面增添了动态视觉效果，提升了用户体验。 首先，我们要理解"渐变效果"在CSS3中的实现。CSS3...
css3 渐变
weixin_33742618的博客
08-09 142
css3 ps: css越来越真正的像一门语言了，css已经有变量了，刚刚看到文档中。一个实验性质的功能。 渐变 渐变分为两种渐变，一种是线性渐变，一种是径向渐变 线性渐变 线性渐变为向上，向下，向左，向右两种渐变方式。 linear-gradient()函数 此为css的一个函数。线性渐变由一个轴即梯度线构成。其上的每个点具有两种或多种颜色。其轴上的每个点具有独立的颜色。为了构建出平滑的渐变，该...
浏览器前缀/ css3 渐变 /
hello world
05-11 1124
浏览器私有前缀 为了浏览器兼容新的css3属性 -ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀 -moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀 -o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀 -webkit- -webkit-box-shadow 所有基于Web...
CSS3渐变效果
09-14
SS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。...但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好。
纯css3渐变进度条动画特效特效代码
03-20
【纯CSS3渐变进度条动画特效】是一种利用CSS3的高级特性来创建动态效果的网页设计技术。在本文中，我们将深入探讨如何利用CSS3的背景属性和动画功能来实现这种独特的视觉效果。 首先，我们要理解CSS3渐变的概念。在...
css3渐变头部导航特效代码
03-20
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是渐变（Gradient）效果。本项目“css3渐变头部导航特效代码”是利用CSS3和jQuery来实现一个创新且吸引人的头部导航菜单，它具有...
纯CSS3渐变色板配色特效代码
03-20
【纯CSS3渐变色板配色特效代码】是一种利用CSS3中的gradient属性来实现的颜色搭配工具，旨在帮助开发者和设计师快速创建出15种不同的渐变色彩效果。这个技术的核心在于理解并灵活运用CSS3的线性渐变（linear-...
CSS3学习，常用常记（渐变）
Sinhaeng_Hhjian
03-24 344
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradi...
CSS3颜色渐变
10-06 733
CSS3 渐变，渐变是两种或多种颜色之间的平滑过渡。 1. CSS3线性渐变在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或沿任意轴。如果使用过制作 Photosho...
CSS3的渐变（Gradients）
Sefan的博客
03-29 1119
逆战班所学皮毛之渐变，css3渐变可以实现多种颜色之间的过渡，诸如线性渐变、径向渐变，线性渐变又可细分为单一方向渐变、对角渐变、角度渐变，通过设置渐变的位置，形状，尺寸，颜色，从此花花绿绿的世界不是梦！
CSS3 渐变
最新发布
m0_72759446的博客
10-18 984
除了简单的过渡效果，还可以在渐变中定义多个颜色和位置，控制渐变的方向、角度和形状，以实现更复杂的效果。渐变是CSS3提供的强大功能之一，可以为网页添加更丰富的视觉效果，提升用户体验。这个例子会在元素的背景上创建一个以中心点为起点，从红色到黄色的径向渐变。这个例子会在元素的背景上创建一个从红色到黄色的线性渐变。
css3渐变
前端小99的博客
07-11 1715
从上自下 background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */    background: -moz-linear-gradient(red, blue); /* Fir...
css3渐变背景颜色动画
07-14
### 回答1： CSS3渐变背景颜色动画是通过使用CSS3的transition和animation属性来实现的。首先，我们可以使用linear-gradient函数定义一个渐变背景颜色： div { background: linear-gradient(to right, red, blue); } 这将创建一个从左到右的红色到蓝色的渐变背景。然后，我们可以使用transition属性来定义过渡效果： div { transition: background 0.5s ease-in-out; } 这将使背景颜色的变化在0.5秒内平滑过渡，并且动画效果的速度采用了"ease-in-out"的缓动函数，使过渡更加自然。接下来，我们可以使用animation属性来创建一个动画： @keyframes colorChange { 0% { background: red; } 50% { background: blue; } 100% { background: red; } } div { animation: colorChange 3s infinite; } 这里我们定义了一个名为colorChange的动画，它会在3秒钟内循环播放，并且背景颜色会在动画的不同阶段中从红色到蓝色再返回红色。最后，我们将动画应用到div元素上。通过这些CSS属性和函数的组合，我们就可以实现一个具有渐变背景颜色动画的效果。 ### 回答2： CSS3渐变背景颜色动画可以通过使用@keyframes和animation属性来实现。首先，我们需要定义一个@keyframes规则，用于指定渐变动画的关键帧。 在@keyframes规则中，我们可以通过调整背景颜色的透明度或色值来创建渐变效果。例如，我们可以从一个颜色过渡到另一个颜色，或者让背景颜色从透明变为不透明。通过定义多个关键帧，我们可以创造出更加复杂的渐变效果。 接下来，我们将@keyframes规则应用到要应用渐变动画的元素上，通过animation属性设置动画的名称、时间和动画类型等属性。 例如，下面是一个使用CSS3渐变背景颜色动画的示例代码： ``` <style> @keyframes gradientAnimation { 0% { background-color: red; } 50% { background-color: yellow; } 100% { background-color: blue; } } .box { width: 200px; height: 200px; animation: gradientAnimation 5s linear infinite; } </style> <div class="box"></div> ``` 在上面的代码中，我们定义了一个名为gradientAnimation的@keyframes规则，它将背景颜色从红色过渡到黄色，再过渡到蓝色。然后，我们在class为box的元素上应用了这个动画，并设置动画的持续时间为5秒，动画类型为线性动画，且无限循环播放。 通过上述代码，我们可以在浏览器中看到一个长方形元素，它的背景颜色会不断从红色过渡到黄色，再过渡到蓝色，然后重新开始。这就是一个简单的CSS3渐变背景颜色动画的实现。 ### 回答3： CSS3渐变背景颜色动画是通过使用CSS3的渐变属性和动画属性来实现的。首先，我们可以使用渐变属性来定义一个渐变背景，例如使用linear-gradient（线性渐变）或radial-gradient（径向渐变）函数来定义渐变方向和颜色范围。 然后，我们可以使用动画属性来创建一个背景颜色的动画效果。我们可以定义动画的持续时间、动画类型和动画延迟等属性。通过这些属性的组合，我们可以创建出各种不同的渐变背景颜色动画效果。 例如，我们可以创建一个线性渐变背景颜色动画，让背景颜色从红色渐变到蓝色。可以使用以下CSS代码实现： ```css div { width: 200px; height: 200px; background: linear-gradient(to right, red, blue); animation: bg-animation 3s linear infinite; } @keyframes bg-animation { 0% { background: linear-gradient(to right, red, blue); } 50% { background: linear-gradient(to right, blue, green); } 100% { background: linear-gradient(to right, green, red); } } ``` 在上面的代码中，我们创建了一个div元素，并且设置了它的宽度和高度。然后，我们使用linear-gradient函数来定义一个红色到蓝色的线性渐变作为背景颜色。 接下来，我们使用@keyframes规则创建了一个名为bg-animation的动画。在动画的关键帧中，我们定义了背景颜色在0%、50%和100%时的值，分别是红色到蓝色、蓝色到绿色和绿色到红色的线性渐变。 最后，我们把动画应用到了div元素上，设置了动画的持续时间为3秒，动画类型为线性（linear），并且让动画无限循环播放。 通过这种方式，我们就可以创建出一个使用CSS3渐变背景颜色动画的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值