仿照linktree做的个人主页

· 主题

你可以访问这里查看： https://hoytzhang.com

pc-hoytzhang.webp

实现的效果：

下面是代码，当然还有一个去除JS的代码，一起附在下面，可能需要你手动设置按钮颜色

附带JS的版本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @font-face {
            font-family: 'Opposans';
            src: url('opposans.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #buttonContainer hr {
            border: none;
            border-top: 2px dashed #007bff;
            margin: 10px 10px;
        }
        body {
            font-family: 'Opposans', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background 0.5s;
        }
        .container {
            text-align: center;
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }
        h1 {
            color: white;
            padding: 0;
            margin: 0;
        }
        .link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: white;
            padding: 15px;
            margin: 10px 0;
            text-decoration: none;
            border-radius: 30px;
            transition: background 0.3s;
        }
        .link i {
            padding: 0px;
            width: 1.2rem;
            height: 1.2rem;
            font-size: 1.2rem;
            margin-right: 10px;
        }
        .social-media {
            margin: 20px;
            display: flex;
            justify-content: center;
        }
        .social-icon {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            font-size: 1.2rem;
            transition: background 0.3s;
            text-decoration: none;
        }
        .social-icon:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        footer {
            margin-top: 20px;
            font-size: 0.8em;
            color: white;
        }

        @media (max-width: 600px) {
            .container {
                backdrop-filter: none;
                box-shadow: none;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Name here</h1>
    <div class="social-media">
        <a class="social-icon" href="https://github.com/username" target="_blank"><i class="fa-brands fa-github"></i></a>
        <a class="social-icon" href="https://x.com/username" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
        <a class="social-icon" href="https://instagram.com/username" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        <a class="social-icon" href="https://t.me/username" target="_blank"><i class="fa-brands fa-telegram"></i></a>
    </div>
    <a class="link" href="https://myblog.com"><i class="fas fa-scroll"></i>Blog</a>
    <a class="link" href="mailto:m@username.com"><i class="fas fa-envelope"></i>Hire me</a>
    <a class="link" href="/" id="dynamicButtonLink"><i class="fa-solid fa-file-code"></i>Projects</a>
    <div id="buttonContainer" style="display: none;">
        <hr>
        <a class="link" href="https://username.site"><i class="fas fa-link"></i>Projects name</a>
        <a class="link" href="https://github.com/username/Projects1/"><i class="fab fa-github"></i>Projects1</a>
        <a class="link" href="https://github.com/username/Projects2/"><i class="fab fa-github"></i>Projects2</a>
    </div>
</div>

<footer>
    <p>&copy; 2024 Name</p>
</footer>

<canvas id="myCanvas" style="display:none;"></canvas>

<script>
    const backgrounds = [
        '1.webp',
        '2.webp',
        '3.webp',
        '4.webp',
        '5.webp',
        '6.webp',
        '7.webp',
        '8.webp',
        '9.webp',
        '10.webp',
        '11.webp',
        '12.webp',
        '13.webp',
        '14.webp',
        '15.webp',
        '16.webp',
        '17.webp',
        '18.webp'
    ];
    
    const randomIndex = Math.floor(Math.random() * backgrounds.length);
    const backgroundImage = backgrounds[randomIndex];
    document.body.style.backgroundImage = `url(${backgroundImage})`;

    const canvas = document.getElementById('myCanvas');

    function getImageColor(canvas, img) {
        canvas.width = img.width;
        canvas.height = img.height;

        const context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);

        const data = context.getImageData(0, 0, img.width, img.height).data;
        let r = 0, g = 0, b = 0;

        const pixelCount = img.width * img.height;
        for (let i = 0; i < data.length; i += 4) {
            r += data[i];     // R
            g += data[i + 1]; // G
            b += data[i + 2]; // B
        }
        r = Math.round(r / pixelCount);
        g = Math.round(g / pixelCount);
        b = Math.round(b / pixelCount);

        return `rgb(${r}, ${g}, ${b})`;
    }

    function lightenColor(rgb, percent) {
        const rgbValues = rgb.match(/\d+/g).map(Number);
        const r = Math.min(255, Math.round(rgbValues[0] + (255 - rgbValues[0]) * percent));
        const g = Math.min(255, Math.round(rgbValues[1] + (255 - rgbValues[1]) * percent));
        const b = Math.min(255, Math.round(rgbValues[2] + (255 - rgbValues[2]) * percent));
        return `rgb(${r}, ${g}, ${b})`;
    }

    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = backgroundImage;

    img.onload = function() {
        const rgbColor = getImageColor(canvas, img);
        
        const links = document.querySelectorAll('.link');
        links.forEach(link => {
            link.style.backgroundColor = rgbColor;
            link.style.color = 'white';
            
            const hoverColor = lightenColor(rgbColor, 0.2);
            link.addEventListener('mouseover', () => {
                link.style.backgroundColor = hoverColor;
            });
            link.addEventListener('mouseout', () => {
                link.style.backgroundColor = rgbColor;
            });
        });
        const hr = document.querySelector('#buttonContainer hr');
        hr.style.borderTop = `2px dashed ${rgbColor}`;
        const socialIcons = document.querySelectorAll('.social-icon');
        socialIcons.forEach(icon => {
            icon.style.backgroundColor = rgbColor;
            
            const hoverColor = lightenColor(rgbColor, 0.2);
            icon.addEventListener('mouseover', () => {
                icon.style.backgroundColor = hoverColor;
            });
            icon.addEventListener('mouseout', () => {
                icon.style.backgroundColor = rgbColor;
            });
        });

        const footer = document.querySelector('footer');
        footer.style.color = rgbColor;
    };
    document.getElementById('dynamicButtonLink').addEventListener('click', function(event) {
        event.preventDefault();

        const buttonContainer = document.getElementById('buttonContainer');

        if (buttonContainer.style.display === 'none') {
            buttonContainer.style.display = 'block';
        } else {
            buttonContainer.style.display = 'none';
        }
    });
</script>

</body>
</html>

去除JS的版本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @font-face {
            font-family: 'Opposans';
            src: url('opposans.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #buttonContainer hr {
            border: none;
            border-top: 2px dashed #007bff;
            margin: 10px 10px;
        }
        body {
            font-family: 'Opposans', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            
            background-repeat: no-repeat;
            transition: background 0.5s;
        }
        .container {
            text-align: center;
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }
        h1 {
            color: white;
            padding: 0;
            margin: 0;
        }
        .link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: white;
            padding: 15px;
            margin: 10px 0;
            text-decoration: none;
            border-radius: 30px;
            transition: background 0.3s;
        }
        .link i {
            padding: 0px;
            width: 1.2rem;
            height: 1.2rem;
            font-size: 1.2rem;
            margin-right: 10px;
        }
        .social-media {
            margin: 20px;
            display: flex;
            justify-content: center;
        }
        .social-icon {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            font-size: 1.2rem;
            transition: background 0.3s;
            text-decoration: none;
        }
        .social-icon:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        footer {
            margin-top: 20px;
            font-size: 0.8em;
            color: white;
        }

        @media (max-width: 600px) {
            .container {
                backdrop-filter: none;
                box-shadow: none;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Name here</h1>
    <div class="social-media">
        <a class="social-icon" href="https://github.com/username" target="_blank"><i class="fa-brands fa-github"></i></a>
        <a class="social-icon" href="https://x.com/username" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
        <a class="social-icon" href="https://instagram.com/username" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        <a class="social-icon" href="https://t.me/username" target="_blank"><i class="fa-brands fa-telegram"></i></a>
    </div>
    <a class="link" href="https://myblog.com"><i class="fas fa-scroll"></i>Blog</a>
    <a class="link" href="mailto:m@username.com"><i class="fas fa-envelope"></i>Hire me</a>
    <a class="link" href="/" id="dynamicButtonLink"><i class="fa-solid fa-file-code"></i>Projects</a>
    <hr>
    <a class="link" href="https://username.site"><i class="fas fa-link"></i>Projects name</a>
    <a class="link" href="https://github.com/username/Projects1/"><i class="fab fa-github"></i>Projects1</a>
    <a class="link" href="https://github.com/username/Projects2/"><i class="fab fa-github"></i>Projects2</a>
</div>

<footer>
    <p>&copy; 2024 Name</p>
</footer>

</body>
</html>