纯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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue实现记事本功能
2019/06/26 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
Python2/3中urllib库的一些常见用法
2017/12/19 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python按比例随机切分数据的实现
2019/07/11 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
委托函范文
2015/01/29 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python