CSS3渐变色与过渡效果

最新推荐文章于 2024-06-29 12:07:26 发布

云杰8了

最新推荐文章于 2024-06-29 12:07:26 发布

阅读量1.7k

点赞数

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

本文链接：https://blog.csdn.net/weixin_50821119/article/details/111192886

版权

css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中的线性渐变和径向渐变，包括不同方向、角度设置、颜色节点分布以及透明度的使用。同时，讲解了如何创建重复渐变。此外，还探讨了CSS3的过渡效果，包括过渡属性、时间、曲线和延迟时间的设置，展示了如何实现元素状态变化时平滑过渡的技巧。

摘要由CSDN通过智能技术生成

CSS3渐变色与过渡效果

CSS渐变色介绍

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

在这里插入图片描述

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

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

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向。
径向渐变（Radial Gradients）- 由它们的中心向四周发散。

线性渐变

语法

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

线性渐变 - 从上到下（默认情况下）。

从上到下的线性渐变，起点是红色，慢慢过渡到黄色：

  <style>
        #grad {
            width: 200px;
            height: 200px;
            /* 默认从上到下 */
            background-image: linear-gradient(#e66465, #9198e5);
        }
    </style>
        <div id="grad"></div>

线性渐变

to top 从左到右
to bottom 从上到下
to left 从右到左
to right 从左到右

 background-image: linear-gradient(to top, #e66465, #9198e5);

线性渐变 - 对角

从左上角到右下角的线性渐变：

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

线性渐变-角度值单位（deg）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟</title> 
<style>
#grad1 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(0deg, red, yellow); 
}

#grad2 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(90deg, red, yellow); 
}

#grad3 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(180deg, red, yellow); 
}

#grad4 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(-90deg, red, yellow); 
}
</style>
</head>
<body>

<h3>线性渐变 - 使用不同的角度</h3>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

可以设置多个颜色渐变

#grad {
  background-image: linear-gradient(red, yellow, green);
}

使用透明度（transparent）颜色用rgab()

rgba最后一个值代表透明度，默认为1.最小为0.不透明。

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

实例
一个重复的线性渐变：可以写多个颜色

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 径向渐变

CSS3 径向渐变说明。

指定一个点像四周发散，有点像在水中扔一个小石头，小石头激起的波浪。

语法

渐变的中心、形状（圆形或椭圆形）、大小。
默认情况下，渐变的中心是 center（表示在中心点）。
渐变的形状是 ellipse（表示椭圆形）。
渐变的大小是 farthest-corner（父盒子大小）。
background-image: radial-gradient(
shape size at position, start-color, …, last-color);

径向渐变 - 颜色节点均匀分布（默认情况下）

#grad {
  background-image: radial-gradient(red, yellow, green);
}

径向渐变 - 颜色节点不均匀分布

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

设置形状

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

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

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

size 参数定义了渐变的大小。它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner

过渡transition

过度简写属性一般顺序 过渡属性、过渡时间、过渡曲线、延迟时间

过渡属性如下
1 width宽度，高度height，all,等等。
2过渡时间秒
3过渡曲线，
transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。必须
transition-duration: 过渡的时间，单位可以是s或者ms。必须
transition-delay:指定过渡生效的延迟时间。
transition-timing-function:

        ease 慢慢减速
        linear 匀速
        ease-in 加速
        ease-out 减速
        ease-in-out 先加速后减速
    
    过渡属性 完成时间 运动曲线 延迟时间
    transition：all 3s linear 1s;
    一般有数值/中间状态的属性才可以设置过渡，比如：width，height

云杰8了

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
CSS3渐变色与过渡效果

CSS3渐变色与过渡效果（2D）##CSS渐变色介绍CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向。
复制链接

扫一扫

专栏目录