纯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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
vue组件中实现嵌套子组件案例
Aug 31 Javascript
详解JavaScript中的this指向问题
Feb 05 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中的float类型使用说明
2010/07/27 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
popdiv
2006/07/14 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue实现微信分享功能
2018/11/28 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python中asyncore的用法实例
2014/09/29 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
函授毕业生自我鉴定范文
2014/03/25 职场文书
我的中国心演讲稿
2014/09/04 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL