当前位置： 首页>编程语言>正文

swift uilabel渐变色 渐变色css

编程语言2024-05-28 21:24:41


CSS3渐变色与过渡效果

  • CSS渐变色介绍
  • 线性渐变
  • 语法
  • 线性渐变
  • 线性渐变 - 对角
  • 线性渐变-角度值单位（deg）
  • 可以设置多个颜色渐变
  • 使用透明度（transparent）颜色用rgab()
  • 重复的线性渐变
  • CSS3 径向渐变
  • CSS3 径向渐变说明。
  • 语法
  • 径向渐变 - 颜色节点均匀分布（默认情况下）
  • 设置形状
  • 不同尺寸大小关键字的使用
  • 过渡transition


CSS渐变色介绍

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

swift uilabel渐变色 渐变色css,swift uilabel渐变色 渐变色css_渐变色,第1张

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

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

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

线性渐变

语法

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

  1. 线性渐变 - 从上到下（默认情况下）。
  • 从上到下的线性渐变，起点是红色，慢慢过渡到黄色：
<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



https://www.xamrdz.com/lan/58b1962438.html

相关文章：