大家好，这里是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中的渐变效果的更多相关文章

  1. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  2. CSS3中渐变gradient详解

    这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...

  3. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  4. img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

    img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...

  5. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  6. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  7. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  8. CSS3中的变形处理

    在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...

  9. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

随机推荐

  1. 牛客多校第五场B generator1（十进制矩阵快速幂）题解

    题意: 已知 \(X_i = a * X_{i - 1} + b * X_{i - 2}\),现给定\(X_0,X_1,a,b\),询问\(X^n \mod p\),其中\(n <= 10^{1 ...

  2. vue-cli-service & @vue/cli-service

    vue-cli-service & @vue/cli-service https://www.npmjs.com/package/@vue/cli-service https://yarnpk ...

  3. XSS (跨站脚本攻击) 的原理分析,测试 && 应对措施

    1 1 1 XSS (跨站脚本攻击) 的原理分析,测试 1 demo: <!DOCTYPE html> <html lang="en"> <head& ...

  4. PWA & Service Workers 版本更新 bug

    PWA & Service Workers 版本更新 bug PWA & Service Worker https://developer.mozilla.org/zh-CN/docs ...

  5. wifi IP address scanner on macOS

    wifi IP address scanner on macOS Nmap Network Scanning https://nmap.org/book/inst-macosx.html https: ...

  6. GitHub for mobile

    GitHub for mobile https://github.com/mobile

  7. SVG 2 & SVG & getPointAtLength & getPathSegAtLength

    SVG 2 & SVG & getPointAtLength & getPathSegAtLength getPointAtLength SVG 1.x https://dev ...

  8. Hadoop生态常用数据模型

    Hadoop生态常用数据模型 一.TextFile 二.SequenceFile 1.特性 2.存储结构 3.压缩结构与读取过程 4.读写操作 三.Avro 1.特性 2.数据类型 3.avro-to ...

  9. 6. vue组件详解(一)

    主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念,因为它 ...

  10. Django自学计划之集装箱货物运输物流仓储一站式ERP系统

    业余开始学习时间:2018年1月 业余学习时间段:每天下班晚饭后时间+无事的星期六和星期天+上班时的空闲时间 自学目标: 1.我们要用管理的思维来写我们的系统! 2.我们要用我们的ERP系统帮助中小集 ...