0°

CSS3实现DIV背景颜色动态渐变

在做比较炫酷的网或添加一个漂亮的背景,一个div的颜色可能是动态的,不断变化的。我想这对于一些喜欢个性化的站长是一个不错的选择,比如我网站顶部的渐变条(静态渐变),下面来说一下这种效果是如何实现的。

静态渐变

第一个案例:用制作好的gif图来实现(静态渐变和动态渐变图)。

<div style="background: url(这里输入gif图片地址); height:4px; top:0; left:0; position: fixed; width:100%; z-index:9999;"></div>

将此代码放置你网站所有页面有公共部分页面的body中即可,wordpress只需要添加到header.php、footer.php中即可全站显示了。

说明

  • height:4px; 为高,您可以设置您想要的高度。
  • width:100%; 页面有多宽,他就显示多宽。
  • position: fixed; 是将这个div脱离文档流,当脱离文档流之后,使用 top:0; 将他放置页面最上方,从而达到吸顶效果,在设置 left:0; 是把他放置页面最左边开始。
  • z-index:9999; 是将他层叠属性变成最大的,显示在最上方,从而达到不会被遮挡的效果。
  • background: url(); 用来引入图片,图片放置下方,大家可自行右击下载保存到自己的本地上传至服务器,将 括号 里图片连接更换即可。

第二个案例:linear-gradient

<div style="background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); height:4px; top:0; left:0; position: fixed; width:100%; z-index:9999;"></div>

动态渐变

第一个案例

这个代码是我从凡科首页扒下来的,这个渐变效果的话是一个横向平滑渐变,颜色衔接挺舒服,总体感觉还是挺舒服的。

.fkw-panel-1th .fkw-panel-bg {
    position: absolute;
    width: 100%;
    height: 510px;
    background: url(/image/index/fkw/fkw-panel-bg.jpg?v=201808091330) 0 0 repeat-x;
    background: linear-gradient(309deg,#00f2ff,#275ffe,#5fc0d0,#5d76ff,#275ffe,#00f2ff);
    background-size: 1200% 1200%;
    -webkit-animation: AnimationName 27s ease infinite;
    -moz-animation: AnimationName 27s ease infinite;
    -o-animation: AnimationName 27s ease infinite;
    -ms-animation: AnimationName 27s ease infinite;
    animation: AnimationName 27s ease infinite;
}

第二个案例

这个案例和上面的效果相差不大。

用到的css方法:

(1)linear-gradient:用于设置渐变的颜色:background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #496eaa);
其中为了保证颜色变化的连贯性,第一个颜色属性与最后一个颜色属性最好一致(非必须,仅仅是为了满足视觉效果)
(2)animation(IE和google浏览器需要使用-webkit-animation或者-moz-animation):定义颜色渐变的动作。
@keyframes mymove
            {
                0%{
                    background-position: 0% 0%; 
                }
                50%{
                    background-position: 50% 100%; 
                }
                100%{
                    background-position: 100% 0%;
                }

}

这是所定义的具体动作。

案例代码:

<!doctype html>
<html lang="en">
 <head>
  <style>
  div{
    
    background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #496eaa);
    background-size:1400% 300%;
    position:absolute;
    top:10px;
    left:10px;
    animation:mymove 20s ease infinite;
    -webkit-animation: mymove 20s ease infinite;
    -moz-animation: mymove 20s ease infinite;
  }
  
  @keyframes mymove
  {
     0% {
      background-position: 0% 0%; }
      50% {
      background-position: 50% 100%; }
      100% {
       background-position: 100% 0%; }
  }
  </style>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <div style="width:100%;height:800px">
    
  </div>
 </body>
</html>

作者:江户香葱饼 来源:CSDN


跑马灯渐变效果

这个类似跑马灯效果,CSS3实现,如果想线性渐变的话代码可能不是很适应。

HTML代码

<div class="qingzhao"></div>

CSS代码

.qingzhao{
    animation: qingzhao 1s infinite linear;
    height:10px;
    top:0;
    left:0;
    position: fixed;
    width:100%;
    z-index:9999;
}
@keyframes qingzhao{
        0%{
            background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
        }
        20%{
            background: #000 linear-gradient(to left, #ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc,#5856d6);
        }
        40%{
            background: #000 linear-gradient(to left, #5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc);
        }
        60%{
            background: #000 linear-gradient(to left, #34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff);
        }
        80%{
            background: #000 linear-gradient(to left, #007aff,#34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa);
        }
        100%{
            background: #000 linear-gradient(to left, #5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#4cd964);
        }
}

扩展知识

CSS3 渐变(Gradients)

CSS position 属性

跑马灯渐变参考网站

内容投诉
本站将限制注册.邀请码用完即止!
最新邀请码请到群内获取.q群:567359910
(群密码:关注下面微信公众号,公众号里输入“群答案”获取)
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论

扫一扫 关注公众号