css3中的渐变效果及花斑动画的实现

大家好，这里是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 id="wrap"><div class="inner"></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>

效果图如下：

2.光斑动画

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;background: black;text-align: center;}h1{margin-top: 50px;display: inline-block;color: rgba(255, 255, 255,.3);font:bold 60px "微软雅黑";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 ;}</style></head><body><h1>DEMO软件园</h1></body><script type="text/javascript">var h1 = document.querySelector("h1");var val =-160;setInterval(function(){val+=10;if(val==600){val=-160;}h1.style.backgroundPosition = val+"px";},40)</script>
</html>

效果图如下：

好了，今天的分享就到这里，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！

css3中的渐变效果及花斑动画的实现相关推荐

css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
css3中的景深,3d,和动画效果
在css3中添加了: 景深属性,表现为远小近大 100px~1200px(在其中参数选择整百的进行调整,建议为1200px,效果比较的好) 1.可以在父级元素上添加 perspective:1200p ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
css3中的animation的动画帧制作-卡通人物的走动效果
css3中的animation的动画帧制作-卡通人物的走动效果代码如下: <!DOCTYPE html> <html lang="en"> <hea ...

css3中的渐变效果及花斑动画的实现

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

1.线性渐变

2、径向渐变

css3中的渐变效果及花斑动画的实现相关推荐

最新文章

热门文章