自制一个极限精简的起始页

概括起来讲：约等于空白页

有一日我望着青柠心想，我需要的起始页，或许只是空白页，但是为了让起始页不至于那么单调，于是我就将背景做成了必应的每日一图（CSS来自梧桐）。

之后我又加上了一言（CSS来自青柠，js来自今日诗词）。

一切都清净了……

 

 

 

就这样吧，单文件的网页即可解决问题

<html style="height:100%" lang="zh-cn">
<head>
  <meta charset='utf-8'/>
  <title>新标签页</title>
</head>
<body>
  <style>
    .bg-img{
      z-index: -3;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      backface-visibility: hidden;
    }
    footer {
      position:fixed;
      bottom:100px;
      left:50%;
      transform:translateX(-50%);
      width:fit-content;
      font-size:12px;
      color:rgba(255,255,255,.5);
      text-align:center;
      text-shadow:0 0 20px rgba(0,0,0,.8);
      white-space:nowrap;
    }
    footer.brief .hideWhenBrief {
      display:none;
    }
    #footerBox {
      display:inline-block;
      padding:3px 10px;
      border-radius:6px;
      -webkit-backdrop-filter:blur(10px);
      backdrop-filter:blur(10px);
    }
  </style>
  <img class="bg-img" src="https://api.dujin.org/bing/1920.php">
  <footer class="brief">
    <div id="footerBox">
      <span id="jinrishici-sentence" style="font-size: 20px">Hello World</span>
    </div>
  </footer>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
</body>
</html>

 

posted @ 2022-12-26 20:17  真_人工智障  阅读(73)  评论(0)  编辑  收藏  举报