• 注册
    • 查看作者
    • 博客底部footer设计

      说明:

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

      博客底部footer设计

      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>

       [s-5] 感谢支持

      山西·朔州
    • 0
    • 5
    • 1
    • 187
    • 万物村村长

      请登录之后再进行评论

      登录
    • 0
      万物村村长精神小伙
      [s-3]
    • 0
      万物有灵小学生
      转发了
    • 0
      Cat抽奖王
      花里胡哨的
    • 0
      Dream-小编十年之约
      6666
    • 0
      Dream-小编十年之约
      打赏了294金币
    • 到底部
    • 做任务
    • 实时动态
    • 偏好设置
    • 单栏布局 侧栏位置: