大家好，这里是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之字符串方法upper/lower

    1.描述: upper():用于将字符串全部转换为大写字母 lower():用于将字符串全部转换为小写字母 2.语法 str.upper() str.lower() 3.返回值 upper()或low ...

  2. Leetcode（38）-报数

    报数序列是指一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作  "one 1&quo ...

  3. 9. Lock wait timeout exceeded

    一. 现象 用户打开消息推送有概率报错,后续发现推送消息阅读数.点赞数无法正常更新,mysql报警有行锁, DBA抓到有锁表语句,kill该语句未正常恢复,elk日志有大量的java.sql.SQLE ...

  4. 2019牛客多校第二场F Partition problem（暴搜）题解

    题意:把2n个人分成相同两组,分完之后的价值是val(i, j),其中i属于组1, j属于组2,已知val表,n <= 14 思路:直接dfs暴力分组,新加的价值为当前新加的人与不同组所有人的价 ...

  5. linux下新建用户

    新建用户的两种方式: 一步步创建 useradd -m user1 #-m 是建立家目录 passwd user1 #设置密码 usermod -a -G root user1 #加入管理员 chsh ...

  6. R语言学习2：绘图

    本系列是一个新的系列,在此系列中,我将和大家共同学习R语言.由于我对R语言的了解也甚少,所以本系列更多以一个学习者的视角来完成. 参考教材:<R语言实战>第二版(Robert I.Kaba ...

  7. 如何优雅的阅读 GitHub 上开源 js 框架和库的源码

    如何优雅的阅读 GitHub 上开源 js 框架和库的源码 step 先总后分,即先了解一下啊框架的大体架构,又一个全局的认识,在选择某些和感兴趣的部分,仔细阅读,各个击破: 带着问题阅读,用到了什么 ...

  8. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

  9. js 运算符的执行顺序

    js 运算符的执行顺序 js 运算符优先级 Operator Precedence 下表从最高(21)到最低(1)优先顺序排列 left-to-right 从左到右 / 先左后右 right-to-l ...

  10. JavaScript console.log Questions All In One

    JavaScript console.log Questions All In One "use strict"; /** * * @author xgqfrms * @licen ...