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>
效果图如下：
好了，今天的分享就到这里，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！
css3中的渐变效果的更多相关文章
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- CSS3中渐变gradient详解
这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover
img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
随机推荐
- MySQL5.6 与 MySQL5.7 的区别
目录 编译安装区别 初始化的区别 其他区别 编译安装区别 # 5.7在编译安装的时候多了一个 boost 库 [root@db02 mysql-5.7.20]# yum install -y gcc ...
- K8S(01)二进制部署实践-1.15.5
系列文章说明 本系列文章,可以基本算是 老男孩2019年王硕的K8S周末班课程 笔记,根据视频来看本笔记最好,否则有些地方会看不明白 需要视频可以联系我 目录 系列文章说明 1 部署架构 1.1 架构 ...
- 多线程之ThreadLocal类
深入研究java.lang.ThreadLocal类 0.前言 ThreadLocal(线程变量副本)Synchronized实现内存共享,ThreadLocal为每个线程维护一个本地变量.采用空间换 ...
- .NET中使用DebuggerDisplay轻松定制调试
前言 对于调试的方式有多种,不过在今天我们将看到的监视窗口对变量的监视,当然在这里我们是定制内部的变量值,或者说变量的显示与计算的内容. 注:监视窗口在调试时可以一次显示多个变量."快速监视 ...
- 线程池原理讲解——ThreadPoolExecutor
[这是前几天的存货,留着没发表,今天又复习一遍,润化了部分内容,继续干] 说线程池前,先简单回顾一下线程的状态吧: 1.线程状态转换 线程的五种状态,及其转换关系: 2.线程创建方式 三种:两个接口一 ...
- UVA-10815 Andy's First Dictionary (非原创）
10815 - Andy's First Dictionary Time limit: 3.000 seconds Problem B: Andy's First DictionaryTime lim ...
- js coverage testing
js coverage testing 测试覆盖率 istanbul 伊斯坦堡/伊斯坦布尔 https://istanbul.js.org/ jest coverage https://jestjs. ...
- holy shit StackOverflow
holy shit StackOverflow refs https://stackoverflow.com/users/5934465/xgqfrms?tab=questions xgqfrms 2 ...
- CSS Architecture & CSS Design Patterns
CSS Architecture & CSS Design Patterns BEM Block, Element, Modifier https://en.bem.info/methodol ...
- Android Studio show whitespace & Android studio 设置注释缩进
Android Studio show whitespace & Android studio 设置注释缩进 https://github.com/xgqfrms/flutter/issues ...