大家好，这里是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. VS2010的单元测试（二）

    四.附加测试属性 附加测试属性,在默认生成的测试代码是使被注释掉的,取消注释就可以使用. 例如,要在执行测试前,输出测试开始时间,在执行测试后,输出测试结束时间.代码如下: [ClassInitial ...

  2. Please commit your changes or stash them before you merge问题解决

    问题描述 error: Your local changes to the following files would be overwritten by merge: xxx/xxx/xxx.c P ...

  3. java之 javassist简单使用

    0x01.javassist介绍 什么是javassist,这个词一听起来感觉就很懵,对吧~ public void DynGenerateClass() { ClassPool pool = Cla ...

  4. 5种设置ASP.NET Core应用程序URL的方法

    默认情况下,ASP.NET Core应用程序监听以下URL: http://localhost:5000 https://localhost:5001 在这篇文章中,我展示了5种不同的方式来更改您的应 ...

  5. Watch the Wifi: Visually Stunning Look at the Digital World Invading Cities (video)

    http://singularityhub.com/2011/04/01/watch-the-wifi-visually-stunning-look-at-the-digital-world-inva ...

  6. zhihu level

    zhihu level https://www.zhihu.com/creator/account/growth-level refs xgqfrms 2012-2020 www.cnblogs.co ...

  7. git alias all in one

    git alias all in one workspace:工作区 staging area:暂存区/缓存区 local repository:或本地仓库 remote repository:远程仓 ...

  8. how to design a search component in react

    how to design a search component in react react 如何使用 React 设计并实现一个搜索组件 实时刷新 节流防抖 扩展性,封装,高内聚,低耦合 响应式 ...

  9. taro router

    taro router https://nervjs.github.io/taro/docs/router.html bug import Taro, { Component, Config } fr ...

  10. Flutter: AnimatedList 一个滚动容器，可在插入或移除项目时为其设置动画

    Flutter Widget of the Week import 'dart:math'; import 'package:flutter/material.dart'; void main() = ...