纯js和css实现渐变色包括静态渐变和动态渐变


Posted in Javascript onMay 29, 2014

说起“渐变色”,你会想起什么?

当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变。

所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在改变的;而静态渐变,也就更简单了:天上一到彩虹,赤橙黄绿青蓝紫啊...在当前展示的成品中,颜色从一部分到另一部分的颜色是不一样的,可能幅度比较小,是逐渐改变的,但有一点是至关重要的,它已经存在了,形成了变化的现状且无法再改变。

这样我们先来用javascript实现一下所谓的动态渐变,考虑动态原因就不上图了,我来简单介绍下思路:

* 动态渐变

<span style="font-size:12px;"><html> 
... 
<body> 
<center> 
<div id="fade" style="width:600px;height:200px;"></div> 
</center> 
</body> 
</html></span>

为了方便查看,我写的是内嵌样式,还是推荐使用外链样式的使用啊,接下来进行简单编写动态实现渐变效果:
<span style="font-size:12px;"><script type="text/javascript"> 
var node=document.getElementById("fade"); 
var color="#0000"; 
var level=1; window.load=function fading(){ 
node.style.background=color.+level.toString()+level.toString(); 
level++; 
if(level>16){ 
clearTimeOut(fading); 
}else{ 
setTimeOut(fading,300); 
} 
} 
<script></span>

这样看来我不用多说了吧,就一个拼接和一个重复调用的问题。

* 静态渐变

先来附图,大家看看效果,大体明白神马意思。
纯js和css实现渐变色包括静态渐变和动态渐变 
在不考虑兼容的前提下,额,真改研究下兼容了,这弄界面不考虑兼容有点缺啊,好吧,先这样继续说,我是用的webkit内核,就先用这个来介绍

在css样式中添加:

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));

简单解释下:

linear:这个就碰到了线性渐变和径向渐变的两个概念,无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向;

后面的四个值:分别代表相应方向的px值,可以从左顺时针转的顺序记忆,但是它代表的是to,截止到的颜色

from:这就是开始的颜色了

to:和from是同时出现的,最后渐变结束的颜色

而color-stop:则是指在变化到线的哪个位置的时候会出现什么颜色,当然是从周围过渡过去的,相当于from,to过渡点,from过渡点,to;

好了,这样就明白多了吧,附送下简单的其他的基本代码

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/ 
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/ 
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/

今天看了一集《开讲了》,原来还有这么好看的节目,太lower了么我....
Javascript 相关文章推荐
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
redux.js详解及基本使用
May 24 Javascript
js实现页面跳转重定向的几种方式
May 29 #Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 #Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 #Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 #Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 #Javascript
href下载文件根据id取url并下载
May 28 #Javascript
javascript自定义的addClass()方法
May 28 #Javascript
You might like
图书管理程序(三)
2006/10/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Three.js快速入门教程
2016/09/09 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python异常处理操作实例详解
2018/08/28 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python while true实现爬虫定时任务
2020/06/08 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
党校学习自我鉴定
2014/02/24 职场文书
房屋租房协议书范本
2014/12/04 职场文书
英文商务邀请函范文
2015/01/31 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL