使用原生HTML/CSS/JS加Vanta.js是做一个漂亮的介绍页面

效果展示

在这里插入图片描述

演示连接

访问演示网址:https://www.huhailong.vip/resources/view/about.html

代码文件

除资源文件外代码文件只有一个，所有的样式代码和js代码都在html文件中

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
    <style>
        html{
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        body{
            padding: 0;
            margin: 0;
            overflow-x: hidden;
            background-color: #333333;
            background: url(./images/th.jpg) no-repeat center center fixed;
        }
        main{
            position: relative;
        }
        main.animated {
          opacity: 0;
          filter: blur(10px);
          transition: opacity 1s ease-in-out, filter 1s ease-in-out;
        }
        header{
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding-top: 2em;
            
        }
        header > img{
            cursor: pointer;
            width: 120px;
            height: 120px;
            border: 1px solid #333333;
            border-radius: 100%;
            box-shadow: 2px 3px 6px #333333;
            z-index: 10;
        }
        header > h1{
            padding-top: 2em;
            color: #fff;
            font-size: 14px;
            border: 1px solid gray;
            padding: 5px 10px;
            border-radius: 100px;
            background-color: rgba(0, 0, 0, 0.3);
        }
        ul{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul > li{
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
            font-weight: bold;
            width: 300px;
            margin-top: 2em;
            padding: 10px;
            border-radius: 100px;
            border: 1px solid gray;
            background-color: rgba(0, 0, 0, 0.2);
        }
        ul > li:hover{
            border: 1px solid #333;
            background-color: rgba(0, 0, 0, 0.5);
        }
        a{
            text-decoration: none;
            color: #fff;
        }
        li > a{
            padding-left: 10px;
        }
        #mybg{
            margin: 0;
            padding: 0;
            position: absolute;
            width: 100%;
            height: calc(100% - 5px);

        }
        
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
    <script>
        //确保页面DOM加载完后执行js代码，否则会报找不到element
        window.addEventListener('DOMContentLoaded',()=>{
            VANTA.BIRDS({
              el: "#mybg",
              mouseControls: true,
              touchControls: true,
              gyroControls: false,
              minHeight: 200.00,
              minWidth: 200.00,
              scale: 1.00,
              scaleMobile: 1.00,
              color1: 0x2d014d,
              color2: 0xa400ff,
              birdSize: 1.70,
              wingSpan: 20.00,
              quantity: 3.00,
              backgroundAlpha: 0.00
            })
            setTimeout(() => {
                const main = document.querySelector('main')
                main.style.opacity = 1
                main.style.filter = 'blur(0px)'
            }, 200)
        })
        
        
    </script>
</head>
<body>
    <div id="mybg"></div>
    <main class="animated">
        <header>
            <img src="https://www.huhailong.vip/img/avatar.jpg" alt="header.jpg"/>
            <h1>@胡海龙</h1>
        </header>
        <ul>
            <li>
                <img width="25px" src="./images/home1.svg" alt="home">
                <a href="https://www.huhailong.vip">个人主页</a>
            </li>
            <li>
                <img width="25px" src="./images/csdn.svg" alt="csdn">
                <a href="https://blog.csdn.net/hhl18730252820">CSDN博客</a>
            </li>
            <li>
                <img width="25px" src="./images/gitee.svg" alt="gitee">
                <a href="https://gitee.com/hlovez">Gitee码云</a>
            </li>
            <li>
                <img width="25px" src="./images/bilibili-fill.svg" alt="bilibili">
                <a href="https://space.bilibili.com/326117321?spm_id_from=333.1007.0.0">Bilibili哔哩哔哩</a>
            </li>
            <li>
                <img width="25px" src="./images/email.svg" alt="email">
                <a href="mailto:hhlworkspace@qq.com">邮箱:hhlworkspace@qq.com</a>
            </li>
        </ul>
    </main>
</body>
</html>

相关连接

posted @ 2022-07-14 18:34  胡海龙  阅读(227)  评论(0)    收藏  举报
www.huhailong.vip