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

效果展示

演示连接

访问演示网址:https://www.huhailong.vip

代码文件

除资源文件外代码文件只有一个,所有的样式代码和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 Metitle>
    <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:[email protected]">邮箱:[email protected]a>
            li>
        ul>
    main>
body>
html>

相关连接

  • 源代码下载:www.huhailong.vip -> 个人项目 -> 纯HTML/CSS/JS+Vanta.js实现介绍页面 -> Demo压缩包.zip
  • Vanta.js官网:www.vantajs.com

你可能感兴趣的:(随笔,javascript,前端,html)