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

时间：2021-05-18

说起“渐变色”，你会想起什么？

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

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

这样我们先来用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>

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

* 静态渐变

先来附图，大家看看效果，大体明白神马意思。

在不考虑兼容的前提下，额，真改研究下兼容了，这弄界面不考虑兼容有点缺啊，好吧，先这样继续说，我是用的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);
background:-moz-linear-gradient(left,#ffffff,#ff0000);
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));

今天看了一集《开讲了》，原来还有这么好看的节目，太lower了么我....

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章