纯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 入门讲解1
Apr 15 Javascript
javascript hashtable实现代码
Oct 13 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
js控制table合并具体实现
2014/02/20 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
Python模块搜索路径代码详解
2018/01/29 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
优秀学生党员先进事迹材料
2014/05/29 职场文书
项目经理岗位职责
2015/01/31 职场文书
工作自我评价范文
2015/03/05 职场文书
七年级思品教学反思
2016/02/20 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript