残月引导页代码分享

Bsutss

已于 2024-02-01 18:58:06 修改

阅读量120

点赞数

文章标签：开源

于 2023-04-06 16:47:55 首次发布

本文链接：https://blog.csdn.net/Bstuss/article/details/129993133

版权

极简个人残月拟态引导页

演示图如下

代码如下: 复制/粘贴即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="残月引导页"/>
    <meta name="description"content="个人引导页，残月个人引导页">
    <meta name="author"content="1771245847">
    <title>残月引导页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 通用样式 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
      }

      /* 外层容器样式 */
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      /* 拟态框样式 */
      .modal {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        background-color: #e3f2f6;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        padding: 40px;
        max-width: 600px;
        width: 80vw;
        border: 5px solid #ffffff;
        border-color: rgba(0, 0, 0, 0.1);
      }

      /* 头像样式 */
      .avatar {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
        border-radius: 50%;
        background-image: url(https://tianquan.gtimg.cn/face/item/6486/medium.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.4));
      }

      /* 名称样式 */
      .name {
        text-align: center;
        margin-bottom: 20px;
        font-size: 28px;
        font-weight: 700;
        color: #565656;
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
        filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
      }

      /* 下载按钮样式 */
      .download-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 60px;
        margin-top: 20px;
        margin-bottom: 40px;
        border: none;
        border-radius: 30px;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
        background-image: linear-gradient(to bottom right, #b5a0f7, #8db6ff);
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        outline: none;
        transition: transform 0.2s ease-out;
      }

      /* 下载按钮悬停时的样式 */
      .download-btn:hover {
        transform: scale(1.05);
      }

      /* 安卓下载按钮样式 */
      .android-btn {
        background-image: linear-gradient(to bottom right, #b5a0f7, #8db6ff);
      }

      /* 苹果下载按钮样式 */
      .apple-btn {
        background-color: #4dd0e1;
        color: #ffffff;
      }

      /* 苹果下载按钮悬停时的样式 */
      .apple-btn:hover {
        background-color: #26c6da;
      }

      /* 描述样式 */
      .description {
        margin: 20px 0;
        font-size: 16px;
        color: #666;
        text-align: center;
      }

      /* 其他信息样式 */
      .info {
        margin-bottom: 40px;
        font-size: 16px;
        color: #666;
        text-align: center;
      }

      /* 标题样式 */
      .title {
        margin-bottom: 10px;
        font-weight: 700;
      }

      /* 软件截图样式 */
      .screenshot {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        background-image: url(https://tianquan.gtimg.cn/face/item/6486/medium.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }

      @media only screen and (max-width: 768px) {
        /* 拟态框样式 */
        .modal {
          padding: 20px;
          border: 3px solid #ffffff;
        }

        /* 头像样式 */
        .avatar {
          width: 80px;
          height: 80px;
          margin-bottom: 10px;
        }

        /* 名称样式 */
        .name {
          margin-bottom: 10px;
          font-size: 20px;
        }

        /* 描述样式 */
        .description {
          margin: 10px 0;
          font-size: 14px;
        }

        /* 下载按钮样式 */
        .download-btn {
          width: 160px;
          height: 50px;
          font-size: 18px;
          line-height: 50px;
          margin-top: 10px;
          margin-bottom: 20px;
        }

        /* 其他信息样式 */
        .info {
          font-size: 14px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="modal">
        <div class="avatar"></div>
        <div class="name">个人引导页</div>
        <a href="#" class="download-btn android-btn">待添加</a>
        <a href="#" class="download-btn apple-btn">待添加</a>
        <div class="screenshot"></div>
        <p class="description">
        Copyright © 2023 All Rights Reserved
        </p>
        <div class="info">
          <p><span class="title"></span></p>
          <p><span class="title"></span></p>
        </div>
      </div>
    </div>
  </body>
</html>

②: 再见代码如图下

再见:代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico">
<title>再见</title>
<style>
* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
vertical-align: baseline; box-sizing: border-box; color: inherit; } body
{ background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
height: 100vh; } h1 { font-size: 45vw; text-align: center; position: fixed;
width: 100vw; z-index: 1; color: #ffffff26; text-shadow: 0 0 50px rgba(0,
0, 0, 0.07); top: 50%; -webkit-transform: translateY(-50%); transform:
translateY(-50%); font-family: "Montserrat", monospace; } div { background:
rgba(0, 0, 0, 0); width: 70vw; position: relative; top: 50%; -webkit-transform:
translateY(-50%); transform: translateY(-50%); margin: 0 auto; padding:
30px 30px 10px; box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5); z-index:
3; } P { font-family: "Share Tech Mono", monospace; color: #f5f5f5; margin:
0 0 20px; font-size: 17px; line-height: 1.2; } span { color: #f0c674; }
i { color: #8abeb7; } div a { text-decoration: none; } b { color: #81a2be;
} a.avatar { position: fixed; bottom: 15px; right: -100px; -webkit-animation:
slide 0.5s 4.5s forwards; animation: slide 0.5s 4.5s forwards; display:
block; z-index: 4 } a.avatar img { border-radius: 100%; width: 44px; border:
2px solid white; } @-webkit-keyframes slide { from { right: -100px; -webkit-transform:
rotate(360deg); transform: rotate(360deg); opacity: 0; } to { right: 15px;
-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
} @keyframes slide { from { right: -100px; -webkit-transform: rotate(360deg);
transform: rotate(360deg); opacity: 0; } to { right: 15px; -webkit-transform:
rotate(0deg); transform: rotate(0deg); opacity: 1; } }
</style>
</head>
<body>
<h1>
</h1>
<div>
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
Start The Deletion /*
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
删除成功
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
文件备份自动启用中...
</i>
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
备份失败 ! 仅备份文件碎片...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
文件碎片正在加载...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
加载失败 对不起我们跑路了...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
不要伤心 不要难过...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
或许我们还会再建个站继续骗你 ...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
江湖再见啦 ...
</i>
"
<p>
	>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
拜拜了，哈哈哈 ...
</i>
"
</div>
<script>
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
        var i = 0;
        document.getElementsByTagName('div')[0].innerHTML = "";
        setTimeout(function() {
            var se = setInterval(function() {
                i++;
                document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
                if (i == str.length) {
                    clearInterval(se);
                    document.getElementsByTagName('div')[0].innerHTML = str;
                }
            }, 30);
        }, 0);
</script>
</body>
</html>

本站均来于互联网，请勿用于任何商业用途，仅供学习交流