哪里不亮点哪里

小小九天

已于 2024-09-29 18:24:04 修改

阅读量111

点赞数 4

文章标签： html css javascript

于 2024-09-29 18:19:48 首次发布

本文链接：https://blog.csdn.net/as1278/article/details/142641279

版权

哪里不亮点哪里

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哪里不亮点哪里</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        :root {
            --red-rgb: 248 113 113;
            --blue-rgb: 56 189 248;
            --green-rgb: 74 222 128;
            --yellow-rgb: 253 224 71;
            --background-rgb: 0 0 0
        }

        body {
            height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgb(var(--background-rgb));
            overflow: hidden;
            perspective: 2000px
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        #container {
            width: 140rem;
            aspect-ratio: 1;
            display: grid;
            grid-template-rows:repeat(40, 1fr);
            grid-template-columns:repeat(40, 1fr);
            position: absolute;
            transform: rotateX(50deg) rotateY(-5deg) rotateZ(20deg) scale(1.25)
        }

        #container:after, #container:before {
            content: "";
            position: absolute;
            inset: 0px;
            pointer-events: none
        }

        #container:before {
            z-index: 2;
            background-image: url("https://assets.codepen.io/1468070/plus-pattern-center.png");
            background-size: 5%;
            background-repeat: repeat;
            opacity: 0.25
        }

        #container:after {
            z-index: 3;
            background: radial-gradient(circle, transparent 25%, rgb(var(--background-rgb)) 80%)
        }

        .tile {
            border: 1px solid rgb(255 255 255 / 25%);
            transition: background-color 1500ms
        }

        .tile:hover {
            transition-duration: 0ms
        }

        .tile:nth-child(4n):hover {
            background-color: rgb(var(--red-rgb))
        }

        .tile:nth-child(4n + 1):hover {
            background-color: rgb(var(--blue-rgb))
        }

        .tile:nth-child(4n + 2):hover {
            background-color: rgb(var(--green-rgb))
        }

        .tile:nth-child(4n + 3):hover {
            background-color: rgb(var(--yellow-rgb))
        }

        .tile:nth-child(7n):hover {
            background-color: rgb(var(--blue-rgb))
        }

        .tile:nth-child(7n + 3):hover {
            background-color: rgb(var(--green-rgb))
        }

        .tile:nth-child(7n + 5):hover {
            background-color: rgb(var(--yellow-rgb))
        }

        .tile:nth-child(7n + 6):hover {
            background-color: rgb(var(--red-rgb))
        }

        .tile:nth-child(11n + 1):hover {
            background-color: rgb(var(--red-rgb))
        }

        .tile:nth-child(11n + 4):hover {
            background-color: rgb(var(--blue-rgb))
        }

        .tile:nth-child(11n + 7):hover {
            background-color: rgb(var(--green-rgb))
        }

        .tile:nth-child(11n + 10):hover {
            background-color: rgb(var(--yellow-rgb))
        }

        #links {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 100;
            padding: 1rem
        }

        .meta-link {
            display: flex;
            align-items: center;
            gap: 0.5rem
        }

        .meta-link > :is(span,a) {
            font-family: "Rubik", sans-serif;
            font-size: 1.25rem;
            color: white
        }

        .meta-link > .label {
            text-align: right
        }

        .meta-link > a {
            text-decoration: none;
            outline: none
        }

        .meta-link > a.source {
            color: rgb(94, 106, 210)
        }

        .meta-link > a:is(:hover,:focus) > i {
            color: white
        }

        .meta-link > a.youtube {
            color: rgb(239, 83, 80)
        }

        .meta-link > a.youtube > i {
            padding-top: 0.2rem
        }

        .meta-link > a > i {
            height: 1rem;
            line-height: 1rem
        }
    </style>
</head>

<body>
<div id="container">
    <div class="tile"></div>
</div>

<div id="links">
    <div class="meta-link">
        <span class="dot">·</span>
        
    </div>
</div>
</body>
<script>
    const container = document.querySelector("#container"), tile = document.querySelector(".tile");
    for (let i = 0; i < 1599; i++) {
        container.appendChild(tile.cloneNode())
    }
</script>
</html>

预览 | 下载

哪里不亮点哪里下载

感谢各位的阅读，更多文章请前往九天小窝。