Skip to content

Instantly share code, notes, and snippets.

@skaldebane

skaldebane/index.css

Created October 6, 2023 01:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save skaldebane/b2574b77840b246b25936441b736c18c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save skaldebane/b2574b77840b246b25936441b736c18c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. skaldebane created this gist Oct 6, 2023.
    47 changes: 47 additions & 0 deletions index.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    html { font-family: sans-serif }

    .top {
    width: 196px;
    height: 46px;
    margin: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: inset(0 0 0 0 round 19px);
    background-color: #FFFFFF
    }

    .container {
    position: relative;
    width: 200px;
    height: 50px;
    clip-path: inset(0 0 0 0 round 20px);
    overflow: hidden;
    }

    .bottom {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: rotate 5s linear infinite;
    background: conic-gradient(
    from 0deg,
    rgba(255, 0, 0, 0.7),
    rgba(0, 0, 255, 0.7),
    rgba(0, 255, 0, 0.7),
    rgba(255, 0, 0, 0.7)
    );
    }

    @keyframes rotate {
    0% {
    transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
    transform: translate(-50%, -50%) rotate(360deg);
    }
    }
    14 changes: 14 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
    <div class="container">
    <div class="bottom"></div>
    <div class="top"></div>
    </div>
    <h2><i>Works on Firefox™</i></h2>
    <h3>Made with 💙️ by <b><a href="https://skaldebane.dev" target="_blank">Skaldebane</a></b> in 🇲🇦️</h3>
    </body>
    </html>