阅读 49

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>
复制代码

效果图如下: 在这里插入图片描述 好了,今天的分享就到这里,当然,可能存在些许错误望大家海涵并在评论区多多指正交流,谢谢大家花费时间阅览!

文章分类
前端
文章标签