Skip to content

Instantly share code, notes, and snippets.

@yangkaid

yangkaid/.markdown

Created September 8, 2021 09:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yangkaid/4b307f6bb9c4f0aaf32b64476f392c49 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yangkaid/4b307f6bb9c4f0aaf32b64476f392c49 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yangkaid created this gist Sep 8, 2021.
    7 changes: 7 additions & 0 deletions .markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    圆环进度条动画
    -------


    A [Pen](https://codepen.io/yangkaid/pen/abwpLjp) by [yangkaid](https://codepen.io/yangkaid) on [CodePen](https://codepen.io).

    [License](https://codepen.io/yangkaid/pen/abwpLjp/license).
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="container">
    <div class="shadow">Hover me </div>
    </div>
    54 changes: 54 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    $color: #e91e63;

    body {
    background: #000;
    }

    .container {
    position: relative;
    overflow: hidden;
    width: 124px;
    height: 124px;
    // overflow: hidden;
    margin: 40px auto;
    border-radius: 50%;
    }

    .shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 60px -60px 0 10px $color, -60px -60px 0 12px $color,
    -60px 60px 0 12px $color, 60px 60px 0 12px $color;
    text-align: center;

    &:hover {
    animation: border .5s ease forwards;
    }
    }

    @keyframes border{
    0% {
    box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px transparent;
    }
    25% {
    box-shadow: 0 -125px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
    }
    50% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
    }
    75% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
    }
    100% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 120px 40px 0 2px $color, 0 0 0 2px #fff;
    }
    }