master

分支 (2)

管理

管理

master

develop

yixiao-blog-web
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好，欢迎来到一笑的世界</title>

    <!-- Meta描述和关键词 -->
    <meta name="description" content="欢迎来到一笑的世界，这里有各种有趣的内容和资源。">
    <meta name="keywords" content="一笑的世界, 有趣的内容, 资源, 欢迎">

    <!-- Open Graph标签 -->
    <meta property="og:title" content="你好，欢迎来到一笑的世界">
    <meta property="og:description" content="欢迎来到一笑的世界，这里有各种有趣的内容和资源。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="你的网址">
    <meta property="og:image" content="图片的URL">

    <!-- Twitter Card标签 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="你好，欢迎来到一笑的世界">
    <meta name="twitter:description" content="欢迎来到一笑的世界，这里有各种有趣的内容和资源。">
    <meta name="twitter:image" content="图片的URL">
    <style>
        body {
            margin: 0; /* 移除默认的边距 */
            background-color: #2c3e50; /* 设置背景颜色 */
            color: white; /* 设置文字颜色为白色 */
            font-family: Arial, sans-serif; /* 设置默认字体 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .centered-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 4rem; /* Adjust font size as needed */
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adds shadow to text for better visibility */
        }

        .bg-image {
            background-image: url("/img/首页.jpeg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100vh; /* Full height of the viewport */
            width: 100%;
            position: relative; /* 相对定位 */
        }

        .arrow {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 3rem;
            color: white;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-20px);
            }
            60% {
                transform: translateX(-50%) translateY(-10px);
            }
        }

        @keyframes colorCycle {
            0% { background-color: #424243; }
            10% { background-color: #8e44ad; }
            20% { background-color: #3498db; }
            30% { background-color: #1abc9c; }
            40% { background-color: #f1c40f; }
            50% { background-color: #e67e22; }
            60% { background-color: #9b59b6; }
            70% { background-color: #34495e; }
            80% { background-color: #292218; }
            90% { background-color: #2c3e50; }
            100% { background-color: #e74c3c; }
        }

        .footer {
            animation: colorCycle 10s infinite;
            text-align: center;
            padding: 10px;
            font-size: 12px;
            color: white;
            width: 100%;
        }
        .blog-link{
            color: black; /* 设置文字颜色为黑色 */
            font-family: 'KaiTi', '微软雅黑 Light', serif;
            text-decoration: none; /* 移除下划线 */
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="bg-image">
        <div class="centered-text">境事人非叶落处，焕景深处已向春！</div>
    <div class="arrow">
        <svg t="1717422630858" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="8505" width="200" height="200">
            <path d="M718.07 551c4.06-60.24 3.3-119.84 3.56-180.62 0.28-68.3 13.61-136.4 14-204.11 0.48-80-90.09-69.26-151.47-76.68-59.25-7.17-217.91-60.1-257.89 11.37-21.19 37.89-6.83 100.69-6.57 140.92 0.52 80-1.86 160.31 1.37 240.29 0.31 7.66 4.54 12.47 9.83 14.77-2.47 1.77-7.09 1.88-14.09 0.13-3.68 2.33-36.51 6.94-39 7.56-45.66 11.39-91.34 18.26-137.91 26.44-11.13 2-19.82 17.1-15.7 27.65 43 109.93 152.91 204.88 239.86 280 30.21 26.11 64.29 47.39 90 78.29 9.91 11.92 18 30 32.42 37.7 39.52 21.11 73.78-26.8 100.92-47.26 54-40.67 103.41-85.08 155.06-128.66 45.28-38.21 125.94-86.08 151.42-140.94 40.52-87.14-107.71-87.59-175.81-86.85z m-541.63 20.31c24.95-3.46 49.3-7.86 73.71-12.63-18.24 17-31.17 38.79-49.59 55.57a252.6 252.6 0 0 1-24.12-42.94z m659.44 56.59c-9.89 33.18-82.32 76.7-108.62 98.67-32.79 27.39-64 56.49-96.46 84.24 11.31-16.5 22.8-32.87 34.62-49 3.08-4.21-3.91-8.2-7-4.07q-28.05 37.83-54.24 77a4 4 0 0 0-0.37 0.91c-25.4 24.15-56.6 53.68-81.77 61.6-27.06 8.51-29-11.08-54.87-34.35-23-20.67-47.58-39.32-71.64-58.68 8.94-11.37 19.91-21.46 29-32.57 15.48-18.85 29.62-38.4 47.41-55.23 3.79-3.58-1.89-9.22-5.71-5.71-21.15 19.47-37.1 43.29-56.7 64.29-7.15 7.66-14.84 15.06-21.52 23.12-10.31-8.43-20.49-17-30.32-26.08-6.75-6.23-13.94-12.67-21.29-19.2 23.85-37.17 52.5-71.5 88.71-97.19 4.56-3.24 0.26-10.83-4.44-7.59-37.39 25.71-67.27 60.05-92.36 97.58-31.1-27.57-65.54-57.79-95-90.65 25.22-26.17 50.94-51.86 76.5-77.69 3.28-3.31-1.8-8.39-5.11-5.11-25.71 25.43-51.27 51-77.3 76.12-7.84-9.06-15.42-18.24-22.25-27.7 18.87-17.9 31.26-41.34 50-59.41a2.37 2.37 0 0 0 0.07-3.47c20.35-4 40.75-8.22 61.63-12.4 23.07-4.61 37.57-0.58 49.62-23.64 8.37-16 7.6-43.88 3.75-73.72 24.86-30.09 50.64-59 78.3-86.66 3.19-3.18-1.74-8.11-4.94-4.94-25.79 25.57-51.62 51.44-75.1 79.22-1.92-12.61-4.21-25.32-6.49-37.44 12.26-13.84 27.46-24.86 40.37-38.32 18.71-19.51 33.82-41.93 53.58-60.5 2.89-2.72-1.44-7-4.34-4.34-21.57 19.8-37.77 44.43-59 64.45-10.69 10.05-22.11 18.89-32.42 28.91-0.83-4.38-1.66-8.7-2.43-12.82 0.07-6 0-12 0-18 13.64-29.7 36-51.45 59.38-73.91 2.52-2.43-1.31-6.24-3.83-3.83-21.13 20.16-40.94 40.1-55.51 65 0.12-23.17 0.26-46.33 0.18-69.5 17-33.72 58.22-59.72 82.85-83.63 3.23-3.14-1.7-8.06-4.94-4.94-22.28 21.42-57.4 44.47-78 73.14 0-8.26 0-16.52-0.08-24.77 11.78-17.49 17.25-38.4 29.77-55.74 11.76-16.29 30-30.37 31.1-51.84 0.24-4.51-6.68-4.46-7 0-1.51 22-24.66 36.78-35.6 54.34-7.3 11.71-12.08 24.6-18.36 36.64-0.07-12.21-0.11-24.44-0.19-36.63-0.19-31-6.2-39.19 19.1-59.13 23.45-18.49 47.5-16.15 76.62-14 43.82 3.31 87.27 15.21 130.92 20.85 52.59 6.8 106.17-7.36 107.45 59.89 0.67 35.34-8.35 72.31-10.48 107.85-5.56 92.6 1.11 184.7-10.54 276.76-1.62 12.79 11.86 22.38 23 23 26.74 1.44 52.42-4.35 78.84-3.17l42.42 7.84q47.94 7.35 21.03 26.15z"
                  fill="#333333" p-id="8506"></path>
            <path d="M428.11 419l-15.42 23.13c-2.07 3.11 2.94 6 5 2.92l15.42-23.13c2.06-3.09-2.94-5.99-5-2.92zM358.53 579.72c-17.73 17.59-35.63 35-53.44 52.53-10.56 10.39-24.06 19.12-25.21 35-0.34 4.69 7.45 5.82 8.28 1.12 2.83-15.92 22.71-30.45 33.64-41.45 13.94-14 28.13-27.8 42.09-41.81 3.46-3.49-1.89-8.83-5.36-5.39zM359 634.17c-18.68 19.91-36.42 40.68-54.74 60.92-3.65 4 2.44 10.07 6 6 17.82-20.75 35-42 53.21-62.45 2.62-3.04-1.7-7.43-4.47-4.47zM420.38 703.27c-18.71 19.88-37.14 40.08-54.57 61.09-3.63 4.38 2.8 10.64 6.22 6.22 16.77-21.69 34.72-42.21 53.38-62.28 3.11-3.35-1.88-8.38-5.03-5.03zM513.09 726.57c-29.2 30.8-47.09 69.94-78.09 99.22-4.49 4.23 2.17 10.76 6.73 6.73 32-28.34 48.41-69.26 76.09-101.26 2.71-3.2-1.77-7.82-4.73-4.69zM565.71 726.75c-24.26 38.87-51.5 74.84-84.66 106.58-4.65 4.45 2.48 11.6 7.07 7.07 33.17-32.75 60.62-69.68 85-109.33 2.88-4.7-4.5-8.98-7.41-4.32zM628.32 749.28q-41.47 50.9-85.5 99.56c-4.23 4.66 2.78 11.63 6.9 6.9 28.77-33 56.57-66.89 84.14-100.92 3.14-3.88-2.35-9.46-5.54-5.54z"
                  fill="#333333" p-id="8507"></path>
        </svg>
    </div>
</div>
<div id="app"></div>
<div class="footer">
    <p>CSDN直达链接</p>
    <a href="https://blog.csdn.net/weixin_50503886?spm=1000.2115.3001.5343" class="blog-link">博客链接</a>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>