Awesome CSS effects

Walk-throughs of how to create a bunch of awesome CSS effects paired with pleasant background music.
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .box {
        width: 200px;
        height: 60px;
        border: 2px solid black;
        text-align: center;
        font-size: 30px;
        line-height: 60px;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 150px;
        height: 150px;
        position: relative;
    }
    
    html,
    body,
    .box .content {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .box {
        width: 300px;
        height: 300px;
        background: linear-gradient(
            -45deg,
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: skyblue;
    }
    
    .box {
        background: linear-gradient(to right, gold, darkorange);
        color: white;
        --width: 250px;
        --height: calc(var(--width) / 3);
        width: var(--width);
    html,
    body,
    .checkbox,
    .checkbox .inner,
    .checkbox .inner .toggle {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .checkbox {
        width: 10em;
        height: 5em;
    html,
    body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    :root {
        --color1: deepskyblue;
        --color2: steelblue;
        --color3: royalblue;
        --color4: dodgerblue;
    }
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .box {
        display: flex;
    }
    
    .box .inner {
        width: 200px;
        height: 100px;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom, teal, aqua);
    }
    
    .battery {
        width: 6em;
        height: 3em;
        color: midnightblue;
        border: 0.5em solid currentColor;
        border-radius: 0.2em;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
        color: silver;
    }
    
    .box {
        width: 9em;
        height: 3em;
        text-align: center;
        line-height: 3em;
    html,
    body,
    .circle {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .circle,
    .circle::before,
    .circle::after {
        border-width: 0.4em;
    html,
    body,
    .circle {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    :root {
        --innerRadius: 2em;
    }
    
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(brown, sandybrown);
    }
    
    .text {
        font-size: 5em;
        font-family: "arial black";
        position: relative;
        color: transparent;
    }
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: brown;
    }
    
    .coffee {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: calc(9em + 1em + 2em);
        position: relative;
张偶10:496 months ago
    html, body {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to top left, white, dimgray);
        font-size: 7px;
    }
    
    .books {
        display: flex;
        width: calc(12rem * 3 + 3rem * 2);
        justify-content: space-between;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(dimgray, silver, silver, dimgray);
    }
    
    .card {
        width: 400px;
        background: linear-gradient(#333, dimgray);
        color: white;
        box-sizing: border-box;
        padding: 20px;
    html,
    body,
    .box {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    body {
        background-color: #222;
    }
    
    .box {
    html,
    body,
    .loader {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 10em;
        height: 10em;
        position: relative;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(gray, silver);
    }
    
    .four-zero-four p {
        width: 10em;
        height: 10em;
        display: inline-block;
        font-size: 12px;
        margin: 0.5em;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .menu {
        padding: 0;
    }
    
    .menu li {
        color: transparent;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(silver, white);
    }
    
    .heart {
        display: grid;
        grid-gap: 2px;
        grid-template-columns: repeat(9, 1fr);
    }
    
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: darkcyan;
    }
    
    h1 {
        color: gold;
        text-align: center;
        position: relative;
    }
    
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .rainbow {
        color: transparent;
        font-size: 150px;
        font-family: sans-serif;
        font-weight: bold;
        text-transform: uppercase;
    html, body {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right bottom, gold, chocolate);
    }
    
    :root {
        --x: 3em;
        --y: 1.5em;
    }
    
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(antiquewhite, navajowhite);
    }
    
    .sea {
        width: 300px;
        height: 300px;
        background-color: whitesmoke;
        background-image: linear-gradient(
            darkblue,
张偶8:525 months ago
    html,
    body,
    .loader {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 200px;
        height: 200px;
        position: relative;
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(cadetblue, darkcyan);
    }
    
    nav {
        width: 300px;
        height: 300px;
        background: lemonchiffon;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    html,
    body,
    .bows {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: black;
    }
    
    .rainbow {
        width: 20em;
        height: 10em;
        border: 1px dashed white;/* just assistant, will be removed finally */
张偶8:595 months ago
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .penrose {
        width: 20em;
        height: 20em;
        position: relative;
        font-size: 12px;
        top: -1em;
张偶7:595 months ago
    html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .frame {
        background: whitesmoke;
        width: 100vmin;
        height: 100vmin;
        position: relative;
        perspective: 40vmin;
    }
    html, body {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 60%, white, sandybrown);
    }
    
    .signboard {
        width: 400px;
        height: 300px;
        position: relative;
        animation: swinging 1.5s ease-in-out infinite alternate;
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(silver, dimgray);
    }
    
    * {
        box-sizing: border-box;
    }
    
    .court {
        width: 10em;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(white, silver);
    }
    
    nav {
        --h: 3em;
        
    }
    
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .container {
        filter: contrast(10);
        background-color: black;
        overflow: hidden;
    }
张偶6:045 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(20%, 20%, 20%);
    }
    
    .warning {
        color: whitesmoke;
        font-size: 50px;
        font-family: sans-serif;
        font-weight: bold;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: mediumturquoise;
    }
    
    .panda {
        width: 21em;
        height: 16em;
        background-color: white;
        border: 0.5em solid #333;
张偶11:405 months ago
    body {
        margin: 0;
    }
    
    * {
        animation: 10s infinite linear;
    }
    
    .sky {
        width: 100vw;
        height: 100vh;
        background-color: skyblue;
        position: relative;
        display: flex;
张偶6:535 months ago
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <nav>
                <ul>
                    <li>Home</li>
                </ul>
            </nav>
        </body>
    </html>
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .container {
        border: 1px dashed lime;/* just assistant, will be removed finally */
    }
    
    .container p {
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, navy, black);
    }
    
    .heart {
        width: 14em;
        height: 11em;
        font-size: 25px;
        display: flex;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: paleturquoise;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .book {
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightskyblue;
    }
    
    .pencil {
        width: 50em;
        height: 3.5em;
        border: 1px dashed red;
        font-size: 10px;
张偶13:455 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .equalizer {
        width: 10em;
        height: 10em;
        display: flex;
        justify-content: space-between;
张偶6:465 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, lightgreen, white);
    }
    
    :root {
        --outer-w: 49em;
        --outer-h: 40em;
        --middle-w: 32em;
        --middle-h: 26em;
张偶11:265 months ago
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <nav>
                <ul>
                    <li><
                    <li>
                        <span>p</span>
                        <span>r</span>
                        <span>o</span>
                        <span>d</span>
                        <span>u</span>
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 10em;
        height: 10em;
        border: 1px dashed white;/* just assistant, will be removed finally */
        font-size: 20px;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 10em;
        height: 3em;
        border: 0.3em solid silver;
        border-radius: 3em;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(gray, lightyellow, gray);
    }
    
    .butterfly {
        width: 10em;
        height: 10em;
        position: relative;
        font-size: 8px;
张偶10:335 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center,
            midnightblue, black);
    }
    
    .coil {
        position: relative;
        display: flex;
        justify-content: center;
张偶9:245 months ago
    body {
        margin:0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: darkslategray;
    }
    
    .ice-lolly {
        font-size: 10px;
    }
    
    .flavors {
张偶7:144 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: beige;
    }
    
    .loader {
        position: absolute;
        display: flex;
        font-size: 10px;
        justify-content: space-between;
张偶6:484 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, silver, black);
    }
    
    .radar {
        width: calc(8em + 1.5em);
        height: calc(8em + 1.5em);
        background: 
            linear-gradient(
张偶5:534 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: darkslategray;
        overflow: hidden;
    }
    
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        color: white;
        font-size: 1.5em;
        font-family: sans-serif;
        text-transform: uppercase;
张偶7:204 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: darkslategray;
    }
    
    .chess {
        background-color: burlywood;
        font-size: 30px;
        border: 0.2em solid tan;
        box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
张偶9:074 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .container {
        font-size: 10px;
        width: 40em;
        height: 40em;
        position: relative;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .code {
        background-color: silver;
        font-size: 28px;
        font-family: monospace;
        border-radius: 0.5em;
        padding: 1em 0;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .eyes {
        width: 40em;
        height: 10em;
        border: 1px dashed lime;
        font-size: 10px;
张偶3:224 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: darkslategray;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .parrot {
张偶9:354 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    p {
        font-size: 20vw;
        margin: 0;
        color: white;
        font-weight: bold;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, white, skyblue);
    }
    
    .brick {
        width: 40em;
        height: 30em;
        border: 1px dashed;/* just assistant, will be removed finally */
        font-size: 10px;
张偶10:254 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right bottom, teal, steelblue);
        overflow: hidden;
    }
    
    *,
    *::before,
    *::after {
        box-sizing: border-box;
张偶7:564 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right bottom,
            violet, midnightblue);
    }
    
    .steamer {
        width: 30em;
        height: 30em;
        background-color: snow;
张偶8:494 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right bottom,
            moccasin, teal);
    }
    
    .toaster {
        width: 30em;
        height: 30em;
        background-color: snow;
张偶10:034 months ago
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div class="container">
                <div class="field">
                    <div class="left">
                        <span class="halfway-line"></span>
                        <span class="centre-circle"></span>
                        <span class="centre-mark"></span>
                        <span class="penalty-area"></span>
                        <span class="penalty-mark"></span>
                        <span class="penalty-arc"></span>
张偶14:344 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 10em;
        height: 10em;
        font-size: 30px;
        border-radius: 50%;
张偶5:574 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right bottom,
            sandybrown, darkred);
    }
    
    .coffee-machine {
        width: 15em;
        height: 15em;
        background-color: white;
张偶15:004 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(darkgreen 30%, forestgreen);
    }
    
    .loader {
        width: 10em;
        height: 10em;
        font-size: 30px;
    }
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightgray;
    }
    
    .cards,
    .cards > * {
        box-sizing: border-box;
    }
    
张偶7:464 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: teal;
        overflow: hidden;
    }
    
    .loader {
        width: 6em;
        border-bottom: 0.25em solid white;
        font-size: 30px;
张偶7:054 months ago
    body {
        margin: 0;
        height: 100vh;
        background-color: black;
    }
    
    .monster {
        width: 100vw;
        height: 50vh;
        background-color: lightcyan;
        position: relative;
        overflow: hidden;
    }
    
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: goldenrod;
    }
    
    .loader {
        width: 8em;
        height: 8em;
        border: 1px dashed white;/* just assistant, will be removed finally */
        font-size: 30px;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--bc);
        --bc: teal;
    }
    
    .fox *::before,
    .fox *::after {
        content: '';
        position: absolute;
张偶10:214 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, white, gray);
    }
    
    .macbook {
        width: 50em;
        font-size: 10px;
        display: flex;
        flex-direction: column;
张偶7:414 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .candle {
        width: 15em;
        height: 30em;
        font-size: 8px;
        background-color: orange;
张偶10:214 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: seagreen;
    }
    
    .desk {
        width: 70em;
        height: 70em;
        font-size: 5px;
        color: cornsilk;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: seagreen;
    }
    
    .desk {
        width: 70em;
        height: 70em;
        font-size: 5px;
        color: cornsilk;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .flag {
        width: 10em;
        height: 15em;
        font-size: 16px;
        display: flex;
张偶3:593 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .windows-boot {
        width: 21.5em;
        height: 15em;
        display: flex;
        flex-direction: column;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(
            circle at center,
            darkred, black
        );
    }
    
    .mcdonalds {
        width: 36em;
张偶3:423 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(#555, #222);
    }
    
    .wheel {
        width: 9em;
        height: 9em;
        font-size: 25px;
        border: 0.4em solid #777;
张偶6:043 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
        overflow: hidden;
    }
    
    .container {
        width: 30em;
        height: 30em;
        font-size: 12px;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 5em;
        height: 13em;
        font-size: 10px;
        border: 1px dashed white;
张偶4:193 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader {
        width: 7em;
        height: 5em;
        font-size: 50px;
        display: flex;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(midnightblue, black);
    }
    
    .loader {
        width: calc(1em * 7 + 0.15em * 6);
        height: 1.5em;
        display: flex;
        justify-content: space-between;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(#666, #333);
    }
    
    .box {
        width: 30em;
        height: 20em;
        font-size: 10px;
        background-color: steelblue;
张偶4:283 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .loader,
    .loader span {
        width: 10em;
        height: 10em;
        border: 0.25em solid white;
张偶4:203 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(floralwhite, wheat);
    }
    
    /* body */
    .fridge {
        width: 24em;
        height: 38em;
        font-size: 30px;
张偶11:353 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(black, maroon);
    }
    
    .flame {
        width: 10em;
        height: 12em;
        font-size: 30px;
        position: relative;
张偶9:163 months ago
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    const COUNT = 15;
    
    d3.select('.hexagons')
        .selectAll('span')
        .data(d3.range(COUNT))
        .enter()
        .append('span')
        .style('--scale', (d) => Math.pow(0.9, d))
        .style('--n', (d) => d + 1);
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(#666, #333);
    }
    
    .loader {
        width: 8em;
        height: 10em;
        font-size: 25px;
    }
张偶10:413 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .saturn {
        width: 20em;
        height: 20em;
        font-size: 15px;
        position: relative;
张偶7:183 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    
    .cable {
        display: flex;
        align-items: center;
        font-size: 10px;
        margin-left: 5em;
        animation: show 5s linear infinite;
张偶13:163 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to left bottom, linen, tan);
    }
    
    .camera {
        width: 20em;
        height: 23em;
        font-size: 10px;
        background: 
张偶12:033 months ago
    const COUNT_OF_PARTICLES = 3;
    
    d3.select('.worm')
        .style('--particles', COUNT_OF_PARTICLES);
张偶7:543 months ago
    const COUNT_OF_STARS = 4;
    
    d3.select('.stars')
        .selectAll('span')
        .data(d3.range(COUNT_OF_STARS))
        .enter()
        .append('span')
        .style('--left', () => Math.ceil(Math.random() * 100))
        .style('--size', () => Math.random() * 1.5 + 1)
        .style('--opacity', () => Math.random() * 0.3 + 0.5)
        .sty
张偶18:063 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(
            circle at center,
            sienna,
            maroon
        );
    }
    
    .loader {
张偶8:043 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: skyblue;
    }
    
    .pig::before,
    .pig::after,
    .pig *::before,
    .pig *::after {
        content: '';
张偶16:123 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right, silver, teal);
    }
    
    .loader {
        --diameter: 10em;
        --width: calc(var(--diameter) * 2);
        --stroke-width: calc(var(--diameter) / 40);
        --dot-diameter: calc(var(--diameter) / 10);
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .neon {
        position: relative;
        overflow: hidden;
        filter: brightness(200%);
    }
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(lightyellow, burlywood);
    }
    
    .pendulums {
        width: 40em;
        height: 30em;
        font-size: 10px;
        border-top: 0.3em solid cadetblue;
张偶7:353 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(white, bisque);
    }
    
    .buddha {
        width: 13em;
        height: 19em;
        font-size: 14px;
        display: flex;
张偶9:482 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightgoldenrodyellow;
    }
    
    .circles {
        width: 10em;
        height: 10em;
        font-size: 30px;
        display: flex;
张偶4:532 months ago
    body {
        margin: 10%;
        padding-top: 10%;
        overflow: hidden;
    }
    
    .truck {
        width: 15em;
        height: 5em;
        font-size: 10px;
        background-color: #444;
        border-radius: 0.4em;
        position: relative;
        animation: 
张偶12:032 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(midnightblue, black);
        font-size: 20px;
        margin-top: 2em;
        overflow: hidden;
    }
    
    .rabbit {
        width: 5em;
张偶16:162 months ago
    body {
        position: fixed;
        margin: 0;
        width: 100vw;
        height: 100vh;
        top: 50%;
        left: 50%;
        animation: 
            3s move ease-in-out infinite alternate,
            3s zoom ease-in-out infinite alternate;
    }
    
    @keyframes zoom {
        to {
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(lightcyan, lightblue);
    }
    
    .monster {
        width: 10em;
        height: 13em;
        font-size: 16px;
        color: blueviolet;
张偶13:112 months ago
    const COUNT_OF_PARTICLES = 3;
    
    d3.select('.circles')
        .style('')
        .selectAll('span')
        .data(d3.range(COUNT_OF_PARTICLES))
        .enter()
        .append('span')
        .style('--n', (d) => d + 1);
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
        overflow: hidden;
    }
    
    .love {
        width: 450px;
        height: 450px;
        border: 1px dashed white;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: turquoise;
    }
    
    .black-bomb {
        width: 13em;
        height: 13em;
        font-size: 16px;
        position: relative;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: papayawhip;
    }
    
    .duck {
        width: 10em;
        height: 10em;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
张偶3:352 months ago
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <nav>
                <ul>
                    <li>home</li>
                    <li>products</li>
                    <li>servic</li>
                    <li>home</li>
                </ul>
            </nav>
        </body>
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #333;
    }
    
    .loader {
        width: 11.7em;
        height: 4.2em;
        font-size: 20px;
        position: relative;
张偶13:062 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightyellow;
    }
    
    .loader {
        width: 30em;
        height: 3em;
        font-size: 14px;
        border: 1px dashed;
张偶3:162 months ago
    const PI = '3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067';
    
    d3.select('.pi')
        .selectAll('span')
        .data(PI)
        .enter()
        .append('span')
        .attr('class', (d) => `d${d}`)
        .style('--d', (d) => d)
        .text((d) => d);
    
    function show() {
        d3.selectAll(`.pi span.d${number}`)
            .classed('show', true);
    const ONLINE_THEME = {
        statusBackgroundColor: 'green',
        secondSignalDelay: '0.2s',
        thirdSignalDelay: '0.4s'
    }
    
    const OFFLINE_THEME = {
        statusBackgroundColor: 'orangered',
        secondSignalDelay: '0s',
        thirdSignalDelay: '0s'
    }
    
    function detectOnlineStatus() {
        let theme = navigator;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: antiquewhite;
    }
    
    .red * {
        position: absolute;
    }
    
    .red *::before,
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: gainsboro;
        overflow: hidden;
    }
    
    .loader {
        width: 4.3em;
        height: 9.8em;
        font-size: 20px;
张偶10:002 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        background: linear-gradient(
            lightslategray 300px,
            #333 300px
        );
    }
    
    .container {
        width: 700px;
        height: 300px;
张偶10:122 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        background: linear-gradient(
            lightslategray 300px,
            #333 300px
        );
    }
    
    .container {
        width: 700px;
        height: 300px;
张偶9:092 months ago
    body {
        margin: 0;
        height: 100vh;
    }
    
    .text {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    .text span {
        width: 100%;
    function buildFish(e) {
        let fish = d3.select('body')
            .append('div')
            .attr('class', 'fish')
            .style('--size', d3.randomUniform(5, 8)())
            .style('--color', d3.randomUniform(-60, 15)())
            // .style('--top', d3.randomUniform(100, 300)())
            .style('--top', e.clientY)
            .style('--duration', d3.randomUniform(3, 6)())
        
        fish.append('span').attr('class', 'body');
        fish.append('span').attr('class', 'eye');
        fish.append('span').attr('class', 'fin');
        fish.append('span').attr('class', 'tail');
张偶14:272 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ccc;
    }
    
    .icon {
        width: 10em;
        height: 10em;
        font-size: 25px;
        background-color: #eee;
张偶5:372 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: deepskyblue;
    }
    
    .plane {
        width: 28em;
        height: 13em;
        font-size: 10px;
        color: black;
张偶12:052 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: dodgerblue;
    }
    
    .cranes {
        width: 52em;
        height: 50em;
        font-size: 7px;
        color: white;
张偶9:332 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: darkolivegreen;
    }
    
    .man {
        width: 12em;
        height: 33em;
        font-size: 10px;
        position: relative;
张偶9:392 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightyellow;
    }
    
    nav ul {
        padding: 0;
        list-style-type: none;
    }
    
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .container {
        width: 17em;
        height: 17em;
        font-size: 12px;
        position: relative;
张偶7:222 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .container {
        width: 8em;
        height: 1em;
        font-size: 35px;
        display: flex;
        justify-content: space-between;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #999;
    }
    
    .container {
        --dark: #222;
        --light: #ddd;
        font-size: 30px;
        width: calc(10em + 0.5em);
张偶9:362 months ago
    function getColor(excludedColor) {
        let colors = new Set(['blue', 'red', 'yellow', 'green']);
        colors.delete(excludedColor);
        return Array.from(colors)[Math.floor(d3.randomUniform(0, colors.size)())];
    }
    
    const ZEROS = d3.range(100).map(() => 0);
    const ONE = {number: 1, color: 'blue'};
    let numbers = ZEROS.reduce(function(numberObjects, d) {
        numberObjects.push({
            number: d,
            color: getColor(numberObjects[numberObjects.length - 1].color)
        });
        return numberObjects;
张偶13:092 months ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .scissors {
        width: 21em;
        height: 7em;
        position: relative;
    }
    
张偶8:37a month ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(white, lightcyan);
    }
    
    .hand {
        width: 16em;
        height: 8em;
        font-size: 12px;
        position: relative;
张偶10:38a month ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightyellow;
        overflow: hidden;
    }
    
    body::before,
    body::after {
        content: '';
        position: absolute;
    let animation = new TimelineMax({repeat: -1, repeatDelay: 0.5});
    
    animation.from('.branch', 4, {scaleY: 0, ease: Power1.easeOut}, 'branch')
        .staggerFrom('.leaves span', 0.5, {scale: 0, ease: Power1.easeOut}, 0.5, 0.5, 'branch')
        .to(['.branch', '.leaves span'], 3, {backgroundColor: 'yellow'})
        .to(['.branch', '.leaves span'], 1, {autoAlpha: 0});
张偶8:57a month ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #333;
    }
    
    nav ul {
        padding: 0;
        list-style-type: none;
    }
    
    const HUE_DEG = 24;
    const COUNT = 2;
    
    d3.select('.loader')
        .selectAll('span')
        .data(d3.range(COUNT).map(d => d + 1))
        .enter()
        .append('span')
        .style('background-color', d => d % 2 !== 0
            ? `hsl(${HUE_DEG}, 100%, 65%)`
            : 'black');
    
    let animation = new TimelineMax({repeat: -1});
    animation.staggerFrom('.loader span', 0.5, {s});
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .container {
        width: 30em;
        height: 30em;
        font-size: 8px;
        display: grid;
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    const COUNT = 3;
    
    d3.select('.container')
        .selectAll('span')
        .data(d3.range(COUNT))
        .enter()
        .append('span')
        .style('--x', () => d3.randomUniform(1, 99)())
        .style('--y', () => d3.randomUniform(1, 99)())
        .style('--n', d => d)
        .style('--dark-color', (d) => d3.co)
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(pink, white, pink);
        overflow: hidden;
    }
    
    .container span {
        display: inline-block;
        color: purple;
        font-weight: bold;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: teal;
    }
    
    .stamp {
        width: 40.5em;
        height: 71em;
        font-size: 6px;
        background-color: white;
张偶13:5829 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: teal;
    }
    
    .stamp {
        width: 57em;
        height: 71em;
        font-size: 5px;
        background-color: white;
张偶14:4029 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: teal;
    }
    
    .stamp {
        width: 45em;
        height: 63em;
        font-size: 6px;
        background-color: white;
张偶13:0628 days ago
    const SIDE_LENGTH = 8;
    
    let container = d3.select('.container')
        .style('--side-length', SIDE_LENGTH);
    
    function appendSpan(selector) {
        container.select(selector)
            .selectAll('span')
            .data(d3.range(SIDE_LENGTH * SIDE_LENGTH))
            .enter()
            .append('span');
    }
    
    appendSpan('.horizontal');
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #eee;
        font-size: var(--font-size);
    }
    
    :root {
        --font-size: 16px;
    }
    
张偶10:0027 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(#eee 70%, pink);
    }
    
    .loader {
        width: 6em;
        height: 6em;
        font-size: 16px;
        background-color: pink;
张偶5:1626 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: cornsilk;
    }
    
    ul {
        padding: 0;
        list-style-type: none;
    }
    
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(deepskyblue, navy);
    }
    
    ul {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-direction: column;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: silver;
        perspective: 400px;
    }
    
    .spinner {
        width: 50vmin;
        height: 50vmin;
        border: 1px dashed red;
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <figure class="container">
                <div class="square">
                    <span></span>
                </div>
            </figure>
        </body>
    </html>
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(176, 0, 0, 0.75);
    }
    
    .baymax {
        width: 30em;
        height: 41em;
        font-size: 10px;
        outline: 1px dashed yellow;
张偶16:2718 days ago
    body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        background-color: black;
        background-image: 
            linear-gradient(
                to bt,
                #555 2vmin,
                transparent 2vmin
            ),
            linear-gradient(
                to right,
                #555 2vmin,
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightyellow;
    }
    
    .container {
        position: relative;
        width: 20em;
        height: 20em;
        font-size: 10px;
张偶12:4612 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .container {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
    }
    
张偶7:2612 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
            deepskyblue,
            skyblue,
            lightblue 20%
        );
    }
    
    .balloon {
张偶9:4211 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: skyblue;
    }
    
    :root {
        --font-size: 8px;
    }
    
    .toggle {
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .container {
        width: 100vmin;
        height: 100vmin;
        display: flex;
        flex-direction: column;
    }
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(skyblue, lightblue);
        overflow: hidden;
    }
    
    :root {
        --font-size: 10px;
    }
    
张偶11:126 days ago
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #aaa;
    }
    
    .container {
        width: 360px;
        height: 350px;
        border: 1px dashed black;
        position: relative;
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #aaa;
    }
    
    .container {
        width: 360px;
        height: 350px;
        position: relative;
        display: flex;
    body {
        margin: 0;
        height: 100vh;
        overflow: hidden;
    }
    
    .main {
        height: inherit;
        background: linear-gradient(dodgerblue, darkblue);
        display: flex;
        align-items: center;
        justify-content: center;
    }