博客底部footer设计

说明：

刚刚凭借自己仅有的css知识去改了以下单调的博客底部，现在已经好看多啦，效果如下

1. 底部两行字是渐变色

2. 心是会跳动的

代码：

接下来直接放代码了，喜欢的可以自己去修改一下，加更多的css特效

十年之约的图指向的超链接打不开了，干脆改了一下。

    <!--以下为底部代码 -->
     <style>
     #footerTextIcon {
    display: inline-block;
    animation: beating 1s infinite;
    animation-timing-function: ease-out;
    margin: 0 3px;
		 }
	#timeDate {
	animation: turn 6s infinite;
    animation-timing-function: ease-out;
	}
	#times{
	    color: white;
	    animation: turn 6s infinite;
        animation-timing-function: ease-out;
	}
	#hitokoto {
	animation: turn 6s infinite;
    animation-timing-function: ease-out;
	}
    @keyframes turn {
0%{
    color: white;
    
}
25%{
    color: #66CCFF;
}
50%{
    color: #FF3366;
}
75% {
    color: red;
}
100% {
    color: white;
}
    }
@keyframes beating{
0% {
    transform: scale(1);
}
20% {
    transform: scale(1.6);
}
30% {
    transform: scale(1);
}
50% {
    transform: scale(1.6);
}
70%, 100% {
    transform: scale(1);
}
}
    </style>
    
      <a href="填写你的站点url" target="_blank" rel="no follow noopener" style="color:orange">站点名称</a>
      <span id="footerTextIcon">❤️</span>
         <script src="https://v1.hitokoto.cn/?c=a&encode=js&select=%23hitokoto" defer></script>
      <p id="hitokoto"></p>
    <div>
  <span id="timeDate">载入天数...</span>
  <span id="times">载入时分秒...</span>
  <script style="font:whit">
  var now = new Date();
  function createtime(){
      var grt= new Date("10/10/2019 00:00:00");//此处修改你的建站时间或者网站上线时间
      now.setTime(now.getTime()+250);
      days = (now - grt ) / 1000 / 60 / 60 / 24;
      dnum = Math.floor(days);
      hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
      hnum = Math.floor(hours);
      if(String(hnum).length ==1 ){
          hnum = "0" + hnum;
      }
      minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
      mnum = Math.floor(minutes);
      if(String(mnum).length ==1 ){
                mnum = "0" + mnum;
      }
      seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
      snum = Math.round(seconds);
      if(String(snum).length ==1 ){
                snum = "0" + snum;
      }
      document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp"+dnum+"&nbsp天";
      document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }
  setInterval("createtime()",250);
  </script>
  <br>
    <a href="https://www.wwcun.com" target="_blank" rel="nofollow">
<img src="https://www.wwcun.com/wp-content/uploads/user_files/1/bbs/65264176_1606403352.png" alt="Ten years" style="height: 1.5em; ">
</a>

  感谢支持