index.html

<!DOCTYPE html>
<html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>你好鸭，这里是Seimo!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans&display=swap">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
    <script>
        //鼠标移动特效
        (function () {
            var colors = ["#D61C59", "#E7D84B", "#1B8798"];
            characters = ["♬", "♪"];
            elementGroup = [];
            //定义元素类
            class Element {
                //构造函数
                constructor() {
                    num = Math.floor(Math.random() * characters.length);
                    this.character = characters[num];
                    this.lifeSpan = 120;
                    this.initialStyles = {
                        position: "fixed",
                        top: "0",
                        display: "block",
                        pointerEvents: "none",
                        "z-index": "10000000",
                        fontSize: "25px",
                        "will-change": "transform",
                        color: "#000000"
                    };
                    //初始化
                    this.init = function (x, y, color) {
                        this.velocity = { x: (Math.random() < .5 ? -1 : 1) * (Math.random() / 2), y: 1 };
                        this.position = { x: x - 10, y: y - 20 };
                        this.initialStyles.color = color;
                        this.element = document.createElement("span");
                        this.element.innerHTML = this.character;
                        ApplyStyle(this.element, this.initialStyles);
                        this.update();
                        document.body.appendChild(this.element);
                    };
                    //更新
                    this.update = function () {
                        //移动，缩放
                        this.position.x += this.velocity.x;
                        this.position.y += this.velocity.y;
                        this.lifeSpan--;
                        this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + this.lifeSpan / 120 + ")";
                    };
                    //销毁
                    this.die = function () {
                        this.element.parentNode.removeChild(this.element);
                    };
                }
            }

            AddListener();
            //循环
            setInterval(
                function () {
                    Rander();
                },
                1000 / 60);
            //添加事件监听器
            function AddListener() {
                //当前事件对象会作为第一个参数传入函数
                document.addEventListener("mousemove", onMouseMove);
                document.addEventListener("touchmove", Touch);
                document.addEventListener("touchstart", Touch);
            }
            //逐个渲染
            function Rander() {
                for (var i = 0; i < elementGroup.length; i++) {
                    elementGroup[i].update();
                    if (elementGroup[i].lifeSpan < 0) {
                        elementGroup[i].die();
                        elementGroup.splice(i, 1);
                    }
                }
            }
            //鼠标移动事件函数
            function onMouseMove(t) {
                num = Math.floor(Math.random() * colors.length);
                CreateElement(t.clientX, t.clientY, colors[num]);
            }
            //添加元素
            function CreateElement(x, y, color) {
                var e = new Element;
                e.init(x, y, color);
                elementGroup.push(e);
            }
            //调整元素属性
            function ApplyStyle(element, style) {
                for (var i in style) {
                    element.style[i] = style[i];
                }
            }
            //触摸事件函数
            function Touch(t) {
                if (t.touches.length > 0) {
                    for (var i = 0; i < t.touches.length; i++) {
                        num = Math.floor(Math.random() * r.length);
                        s(t.touches[i].clientX, t.touches[i].clientY, r[num]);
                    }
                }
            }
        })();


    </script>


    <style>
        body,
        html {
            background-image: url("images/bkgrd.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 100%;
            margin: 0;
            padding: 0;
            place-items: center;
            font-family: "Google Sans", sans-serif;
        }

        .glass-container {
            width: 80%;
            height: 80%;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 30px 30px 30px 30px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            position: relative;
            box-shadow: 0 0 50px rgba(0, 0, 0);
            top: 10vh;
            flex-direction: column;

        }

        img {
            width: 100%;
            height: auto;
        }


        .about,
        .links {
            flex-grow: 1;

        }

        .logo {
            width: 200px;
            height: auto;
            border: 10px solid rgb(255, 104, 129);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 104, 129);
        }

        table {
            width: 100%;
            height: 100%;
            table-layout: fixed;
        }

        td {
            width: 20%;
            height: 100%;
            text-align: center;
            vertical-align: middle;
        }

        #logo {
            transition: transform 1s ease;
        }
    </style>
    <div class="glass-container">
        <div class="about">
            <div style="text-align: center;margin-top: 10vh">
                <img src="images/logo.jpg" class="logo" id="logo"><br />
                <p>
                <h2 style="color: aliceblue;">你好，我是Seimo!</h2>
                </p>
                <p>
                <h3 style="color: aliceblue;">不负热爱，奔赴山河。 </h3>
                </p>
                <div style="margin-left: 50px;margin-right: 50px;">
                    <hr>
                </div>
            </div>
        </div>

        <div class="links">
            <div class="socials">
                <table>
                    <tr>
                        <td><a href="https://blog.seimo.cn"><svg width="100" height="100">
                                    <circle cx="50" cy="50" r="40" fill="#FB7299" />
                                    <image href="images/blog.svg" x="30" y="30" width="40" height="40">
                                </svg></a></td>
                        <td> <a href="https://www.zhihu.com/people/Seimo"><svg width="100" height="100">
                                    <circle cx="50" cy="50" r="40" fill="#0066ff" />
                                    <image href="images/zhihu.svg" x="30" y="30" width="40" height="40">
                                </svg> </a></td>
                        <td><a href="https://twitter.com/SeimoDev"><svg width="100" height="100">
                                    <circle cx="50" cy="50" r="40" fill="#00acee" />
                                    <image href="images/twitter.svg" x="30" y="30" width="40" height="40">
                                </svg></a></td>
                    </tr>
                    <tr>
                        <td><a href="https://t.me/seimo_dev"><svg width="100" height="100">
                                    <circle cx="50" cy="50" r="40" fill="#00a2e1" />
                                    <image href="images/telegram.svg" x="30" y="30" width="40" height="40">
                                </svg></a></td>
                        <td><a href="https://github.com/SeimoDev"><svg width="100" height="100">
                                <circle cx="50" cy="50" r="40" fill="#000000" />
                                <image href="images/github.svg" x="30" y="30" width="40" height="40">
                            </svg></a></td>
                        <td><a href="mailto:seimo@seimo.cn"><svg width="100" height="100">
                                <circle cx="50" cy="50" r="40" fill="#ff8000" />
                                <image href="images/email.svg" x="30" y="30" width="40" height="40">
                            </svg></a></td>
                    </tr>
                </table>
                <script>var logo = document.getElementById("logo");

                    logo.addEventListener("mouseover", function () {
                        logo.style.transform = "rotate(360deg)";
                    });

                    logo.addEventListener("mouseout", function () {
                        logo.style.transform = "rotate(0deg)";
                    });
                    var icon = document.querySelectorAll("icon");

                </script>
            </div>
        </div>
    </div>


</body>

</html>