纯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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
java script编程起步(第三课)
Jan 10 Javascript
javascript编程起步(第六课)
Jan 10 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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
PHP伪造referer实例代码
2008/09/20 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
两个php日期控制类实例
2014/12/09 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Python FTP操作类代码分享
2014/05/13 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
django缓存配置的几种方法详解
2018/07/16 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
表彰先进的通报
2014/01/31 职场文书
教师学习培训邀请函
2014/02/04 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
出国留学导师推荐信
2015/03/26 职场文书
回复函格式及范文
2015/07/14 职场文书
导游词之井冈山
2019/11/20 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
MySQL主从切换的超详细步骤
2022/06/28 MySQL
JS实现简单九宫格抽奖
2022/06/28 Javascript