【特效】JavaScript网页自动渐变色

偶然的今天看到一个国外网站 http://www.alohaeditor.org/,发现首页背景自动渐变,感觉很有意思,查看源码发现如此简单,具体的代码就不多讲了,哪怕新手也是一看就能看会的,具体示例代码如下

示例

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: absolute;
    }
    body {
      font-family: 'Open Sans', sans-serif;
      color: white;
      font-size: 20px;
      line-height: 150%; 
      transition: background-color 15s;
      background: #54c8eb;
    }
    .content {
      width: 40%;
      margin: 5% 30% 0 30%;
      text-shadow: 1px 1px 10px rgba(0,0,0,0.8);
    }
    @media (max-width: 768px) {
      .content {
        width: 80%;
        margin: 5% 10% 0 10%;        
      }
    }
    a {
      color: white;
      text-decoration: none;
      border-bottom: 2px solid rgba(255,255,255,0.6);
    }
    a.btn {
      background: rgba(0,0,0,0.1);
      padding: 1.6% 2%;
      margin: 2% 1% 1% 0;
      color: white;
      font-size: 18px;
      text-shadow: none;
      text-decoration: none;
      border-radius: 5px;
      display: inline-block;
      border: 1px solid white;
    }
  </style>
  <script>
    (function () {
      function colorcycle() {
        var colors = [
          '#54c8eb', // light blue
          '#4ea9de', // med blue
          '#4b97d2', // dark blue
          '#92cc8f', // light green
          '#41bb98', // mint green
          '#c9de83', // yellowish green
          '#dee569', // yellowisher green
          '#c891c0', // light purple
          '#9464a8', // med purple
          '#7755a1', // dark purple
          '#f069a1', // light pink
          '#f05884', // med pink
          '#e7457b', // dark pink
          '#ffd47e', // peach
          '#f69078' // salmon
        ];
        var color = colors[parseInt(Math.random() * (colors.length - 1), 10)];
        document.getElementsByTagName('body')[0].style.backgroundColor = color;
      }

      setTimeout(function () {
        colorcycle();
        setInterval(colorcycle, 15000);
      }, 1000);
    }());
  </script>
 </head>
 <body>
  <div class="content">
    Hello X-rapido!欢迎您访问X-rapido的博客!   返回<a href="youcl.com">首页</a>
  </div>
 </body>
</html>
赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏