前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >博客底部代码

博客底部代码

作者头像
meowrain
发布2021-04-22 15:45:34
发布2021-04-22 15:45:34
1.3K00
代码可运行
举报
文章被收录于专栏:MeowRain的博客MeowRain的博客
运行总次数:0
代码可运行

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

  1. 底部两行字是渐变色
  2. 心是会跳动的

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

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

代码语言:javascript
代码运行次数:0
运行
复制
    <!--以下为底部代码 -->
     <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://img.wwcun.com/user_files/1/bbs/65264176_1606403352.png" alt="Ten years" style="height: 1.5em; ">
</a>

感谢支持

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年01月03日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档