Skip to content

Instantly share code, notes, and snippets.

@turbotobias

turbotobias/border-dance.css

Created March 13, 2022 07:33
Show Gist options
  • Save turbotobias/2d50475701eb9ab0ae70acaff361e581 to your computer and use it in GitHub Desktop.
Save turbotobias/2d50475701eb9ab0ae70acaff361e581 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. turbotobias created this gist Mar 13, 2022.
    23 changes: 23 additions & 0 deletions border-dance.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    @keyframes border-dance {
    0% {
    background-position: left top, right bottom, left bottom, right top;
    }
    100% {
    background-position: left 15px top, right 15px bottom, left bottom 15px,
    right top 15px;
    }
    }

    .border-dance {
    background-image: linear-gradient(90deg, rgb(222, 46, 0) 50%, transparent 50%),
    linear-gradient(90deg, rgb(222, 46, 0) 50%, transparent 50%),
    linear-gradient(0deg, rgb(222, 46, 0) 50%, transparent 50%),
    linear-gradient(0deg, rgb(222, 46, 0) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right top;
    animation: border-dance 1s infinite linear;

    padding: 8px;
    border-radius: 2px;
    }