大家好，这里是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. Python_小程序

    一.开发前的准备工作 1.申请AppID:一个账号对应一个小程序,个人/个体只能申请5个小程序 2.下载开发工具 二.小程序的文件结构 三. 1.数据绑定 1.1数据的设置 Page( data:{ ...

  2. Kubernets二进制安装(3)之准备签发证书环境

    1.在mfyxw50机器上分别下载如下几个文件:cfssl.cfssl-json.cfssl-certinfo cfssl下载连接地址: https://pkg.cfssl.org/R1.2/cfss ...

  3. (20002, b'DB-Lib error message 20002, severity 9:\nAdaptive Server connection failed (127.0.0.1:3306)\n')

    使用python 3.7 pymssql 连接本地mysql 5.6 报错 解决:参考 https://www.cnblogs.com/springbrotherhpu/p/11503139.html ...

  4. CodeForces - 803C Maximal GCD 【构造】

    You are given positive integer number n. You should create such strictly increasing sequence of k po ...

  5. c# 类(2)

    构造函数 和 析构函数 Constructors and destructors 构造函数是一个特殊的函数,当实例化一个类的时候自动调用这个函数,无返回值(不用定义返回类型)普通函数的定义 publi ...

  6. hdu4801 PocketCube 2阶魔方

    http://acm.hdu.edu.cn/showproblem.php?pid=4801 1. 题目描述给定一个2×2×22×2×2的魔方,当某个面上的4个小块颜色均相同时,称这个面为comple ...

  7. vue & this.$copyText

    vue & this.$copyText click copy https://www.npmjs.com/package/vue-clipboard2 <p>{{message2 ...

  8. website i18n and L10n all in one

    website i18n and L10n all in one Localization & Internationalization 本地化 & 国际化 https://www.w ...

  9. 线上 S1 故障是什么, 线上 S1 故障, 运维故障分级, 运维, 故障分级, P1 级别故障, 故障, P1 , S1

    线上 S1 故障是什么 线上 S1 故障, 运维故障分级, 运维, 故障分级, P1 级别故障, 故障, P1 , S1 故障复盘 https://time.geekbang.org/column/a ...

  10. js & class & init

    js & class & init how to call class init method in js when create an instance 在初始化类实例的时候调用,类 ...