• 技术文章 >web前端 >js教程

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

    2016-05-16 16:46:26原创769
    说起“渐变色”,你会想起什么?

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

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

    这样我们先来用javascript实现一下所谓的动态渐变,考虑动态原因就不上图了,我来简单介绍下思路:

    * 动态渐变
    复制代码 代码如下:


    ...







    为了方便查看,我写的是内嵌样式,还是推荐使用外链样式的使用啊,接下来进行简单编写动态实现渐变效果:
    复制代码 代码如下: