好看的HTML欢迎页

带动态特效非常好看，个人自用的，可以用于修改宝塔的默认站点页面

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎访问我们的网站</title>
    <style>
/* 引入Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap'); 

.container {
    width: 60%;
    margin: 10% auto 0;
    background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);
    padding: 2% 5%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.container:hover {
    transform: translateY(-10px);
    background-image: linear-gradient(to right, #e0e0e0, #f0f0f0);
}

h1, h3 {
    font-family: 'Lobster', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    width: fit-content;
}

h1 {
    font-size: 2.5em;
    text-align: center;
    background: linear-gradient(45deg, #e74c3c, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInDown 2s ease-in-out;
}

h3 {
    font-size: 1.5em;
    text-align: center;
    background: linear-gradient(135deg, #9b59b6, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 2s ease-in-out;
    margin-top: 20px;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ul {
    padding-left: 20px;
    list-style-type: none;
    font-family: 'Roboto', sans-serif;
}

ul li {
    line-height: 2.3;
    font-size: 1.2em;
    color: #666;
    margin-bottom: 0.5em;
    transition: color 0.3s ease;
}

ul li:hover {
    color: #333;
}

a {
    color: #20a53a;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

a:hover {
    color: #1a7e2b;
}

/* 添加一些响应式设计 */
@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 5%;
    }

    h1 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.2em;
    }

    ul li {
        font-size: 1em;
    }
}
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我们的网站</h1>
        <h3>探索我们的产品与服务</h3>
        <h3>我们致力于提供高质量的产品和卓越的客户服务。</h3>
    </div>
</body>
</html>

温馨提示： 本文最后更新于2024-10-11 15:00:24，某些文章具有时效性，若有错误或已失效，请在下方留言或联系 诺言资源网 。

本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:2469329338@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。