002-css渐变色

 

  <p></p>

body {
      margin: 0;
      height: 100vh;
      background-color: #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    p {
      margin: 0;
      color: #fff;
      font-size: 10vw;
      font-weight: bold;
      text-transform: uppercase;
      background-image: linear-gradient(to right,
          orangered,
          orange,
          gold,
          lightgreen,
          cyan,
          dodgerblue,
          mediumpurple,
          hotpink,
          orangered);
      background-size: 110vw;
      font-family: sans-serif;
      animation: sliding 30s linear infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @keyframes sliding {
      to {
        background-position: -2000vw;
      }
    }

var tew = document.getElementsByTagName('p')[0];


    function getTime() {     	//获取时间
      var date = new Date();

      var year = date.getFullYear();
      var month = date.getMonth();
      var day = date.getDate();

      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();

      //这样写显示时间在1~9会挤占空间；所以要在1~9的数字前补零;
      if (hour < 10) {
        hour = '0' + hour;
      }
      if (minute < 10) {
        minute = '0' + minute;
      }
      if (second < 10) {
        second = '0' + second;
      }


      var x = date.getDay();//获取星期


      var time = year + '/' + month + '/' + day + '  ' + hour + ':' + minute + ':' + second
      tew.innerHTML = time;//将时间显示在div内
    }
    getTime();
    setInterval(getTime, 1000);