css3中的渐变效果

日期：2021-04-29 栏目：程序人生浏览：次

大家好，这里是demo软件园，今天为大家分享的是css3中的渐变效果。

css3中的渐变需要注意的是渐变的是图片而不是颜色，而渐变又分为两种：线性渐变与径向渐变，今天我们重点介绍的是线性渐变。

1.线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（或指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

默认从上到下发生渐变： linear-gradient(red,yellow);

background-image:linear-gradient(red,yellow) ;

在这里插入图片描述

上图则为由红到黄的双颜色渐变。

background-image:linear-gradient(red,yellow,green);

在这里插入图片描述

上图则为多颜色渐变。

改变渐变方向的渐变（top bottom left right）：linear-gradient(to结束的方向,red,yellow);

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

在这里插入图片描述

上图则为从左到右方向的渐变。

使用角度的渐变：linear-gradient(角度,red,blue);

background-image:linear-gradient(45deg,red,yellow,green);

在这里插入图片描述

上图则为指定角度的渐变。

颜色节点分布的渐变（第一个不写为0%，最后一个不写为100%）：linear-gradient(red 长度或者百分比,yellow
长度或者百分比);

background-image:linear-gradient(90deg,red 10%,yellow 20%,green 30%);

在这里插入图片描述

上图则为指定颜色节点分布的渐变即10%到20%为红到黄的渐变，20%到30%为黄到绿的渐变，其他区域为纯色。

重复渐变：repeating-linear-gradient(60deg,red 0,blue 30%);

background-image:repeating-linear-gradient(90deg,red,yellow 300px);

在这里插入图片描述

上图则为可重复的渐变。

2、径向渐变

radial-gradient() 函数创建一个

，用来展示由原点（渐变中心）辐射开的颜色渐变。由于径向渐变不常用，在这里我们稍微了解就行。

默认均匀分布：radial-gradient(red,blue);

不均匀分布： radial-gradient(red 50%,blue 70%);

改变渐变的形状：radial-gradient(circle ,red,blue)
circle
ellipse（默认为椭圆）

渐变形状的大小：radial-gradient(closest-corner circle ,red,blue)
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角（默认值）

改变圆心：radial-gradient(closest-corner circle at 10px 10px,red,blue);

最后是根据线性渐变做出的两个有趣的实例：
1.发廊灯

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

效果图如下：

在这里插入图片描述

转载注明出处：https://www.heiqu.com/wsfjwy.html

css3中的渐变效果

相关推荐