简易CSS动画设计（持续更新⏳）
2020-05-26 20:44:52 #CSS #动画设计

一切来源于生活，看到或想到感兴趣的东西，仅仅用自己想要的形式表现出来。

文本聚焦动画

  • 利用伪元素实现文本选中效果，光标移动上去查看效果

    zcheng.site

    显示代码
    HTML
    1
    <span class="transition-demo demo-1">zcheng.site</span>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .transition-demo {
      position: relative;
      cursor: pointer;
      color: #24292e;
      transition: all 0.1s;
      /*demo1*/
      &.demo-1 {
        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          transition: transform 0.3s ease;
          height: 2px;
          background: linear-gradient(to right, #24292e, #666);
          transform: scaleX(0);
          transform-origin: center right;
        }
        &:hover::after {
          transform: scaleX(1);
          transform-origin: center left;
        }
      }
    }

    zcheng.site

    显示代码
    HTML
    1
    <span class="transition-demo demo-2">zcheng.site</span>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .transition-demo {
      position: relative;
      cursor: pointer;
      color: #24292e;
      transition: all 0.1s;
      /*demo-2*/
      &.demo-2 {
        &:hover {
          color: #fff;
          z-index: 1;
        }
        &::after {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: -2px;
          right: -2px;
          transition: transform 0.1s linear;
          background: linear-gradient(#24292e, #666);
          transform: scaleY(0);
          transform-origin: bottom;
          z-index: -1;
        }
        &:hover::after {
          transform: scaleY(1);
        }
      }
    }

    zcheng.site

    显示代码
    HTML
    1
    2
    3
    <span class="transition-demo demo-3-parent">
      <span class="transition-demo demo-3-child">zcheng.site</span>
    </span>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    .transition-demo {
      position: relative;
      cursor: pointer;
      color: #24292e;
      transition: all 0.1s;
      @mixin demo-3($transform) {
        content: "";
        position: absolute;
        background: #262626;
        transform: $transform;
        transition: transform 0.3s;
      }
      &.demo-3-parent {
        padding: 2px 0;
        &::before, &::after {
          @include demo-3(scaleX(0));
          left: 0;
          right: 0;
          height: 2px;
        }
        &::before {
          top: 0;
          transform-origin: center right;
        }
        &::after {
          bottom: 0;
          transform-origin: center left;
        }
        &:hover::before {
          transform-origin: center left;
          transform: scaleX(1);
        }
        &:hover::after {
          transform-origin: center right;
          transform: scaleX(1);
        }
      }
      &.demo-3-child {
        padding: 0 2px;
        &::before, &::after {
          @include demo-3(scaleY(0));
          top: 0;
          bottom: 0;
          width: 2px;
        }
        &::before {
          left: 0;
          transform-origin: center top;
        }
        &::after {
          right: 0;
          transform-origin: center bottom;
        }
        &:hover::before {
          transform-origin: center bottom;
          transform: scaleY(1);
        }
        &:hover::after {
          transform-origin: center top;
          transform: scaleY(1);
        }
      }
    }

简单的加载动画

  • 利用transform结合伪元素实现加载动画

    显示代码
    HTML
    1
    <div class="animation-demo demo-1"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .animation-demo {
      &.demo-1 {
        width: 2em;
        height: 2em;
        border-radius: 50%;
        background: gray;
        animation: animation-demo-1 1s infinite ease-in-out;
        @keyframes animation-demo-1 {
          0% {
            transform: scale(0);
          }
          100% {
            opacity: 0;
            transform: scale(1);
          }
        }
      }
    }

    显示代码
    HTML
    1
    <div class="animation-demo demo-2"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    .animation-demo {
      &.demo-2 {
        @mixin demo-2-common($delay) {
          width: 1.5em;
          height: 1.5em;
          border-radius: 50%;
          animation: animation-demo-2 2s infinite ease-in-out both $delay;
        }
        position: relative;
        @include demo-2-common(0s);
        &::before {
          @include demo-2-common(0.2s);
          content: "";
          position: absolute;
          left: 2em;
        }
        &::after {
          @include demo-2-common(0.4s);
          content: "";
          position: absolute;
          left: 4em;
        }
        @keyframes animation-demo-2 {
          0%, 100% {
            box-shadow: 0 1.5em 0 -1.5em gray;
          }
          50% {
            box-shadow: 0 1.5em 0 0 gray;
          }
        }
      }
    }

  • 类支付宝APP加载动画😁


  • 更简单的实现方式，通过transform倾斜即可


    显示代码
    HTML
    1
    <div class="border-demo demo-6"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    .border-demo {
      position: relative;
      background: gray;
      color: #fff;
      text-align: center;
      cursor: pointer;
      &.demo-6 {
        @mixin border-demo-6($delay) {
          height: 1.5rem;
          width: 1rem;
          background: transparent;
          border-radius: 3px;
          animation: border-demo-6 1.8s infinite ease-in-out $delay both;
        }
        @include border-demo-6(0s);
        position: relative;
        margin: 0 40px;
        transform: skewX(-25deg);
        &::before {
          @include border-demo-6(-0.16s);
          content: "";
          position: absolute;
          left: -20px;
          top: 0;
        }
        &::after {
          @include border-demo-6(0.16s);
          content: "";
          position: absolute;
          right: -20px;
          top: 0;
        }

        @keyframes border-demo-6 {
          0%, 80%, 100% {
            box-shadow: 0 1.5rem 0 -0.75rem gray;
          }
          40% {
            box-shadow: 0 1.5rem 0 0 gray;
          }
        }
      }
    }

  • 旋转效果



    显示代码
    HTML
    1
    <div class="rotate-demo demo-1"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .rotate-demo {
      &.demo-1 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        box-shadow: 0 -21px 0 0 #a3afb7, 14px -14px 0 0 #a3afb7, 21px 0 0 0 #a3afb7, 14px 14px 0 0 #a3afb7, 0 21px 0 0 #a3afb7, -14px 14px 0 0 #a3afb7, -21px 0 0 0 #a3afb7, -14px -14px 0 0 #a3afb7;
        animation: rotate-demo-1 1.5s infinite ease;
      }
      @keyframes rotate-demo-1 {
        0% {
          transform: rotate(0deg);
        }
        80% {
          transform: rotate(275deg);
        }
        100% {
          transform: rotate(270deg);
        }
      }
    }


    显示代码
    HTML
    1
    <div class="rotate-demo demo-2"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    &.demo-2 {
      display: inline-block;
      height: 4.5rem;
      width: 4.5rem;
      border: 4px solid gray;
      border-bottom-color: transparent;
      border-radius: 50%;
      animation: rotate-demo-2 1s infinite linear;
    }
    @keyframes rotate-demo-2 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

按钮效果

  • 按钮边角动画

    显示代码
    HTML
    1
    2
    3
    <div class="border-button-demo demo-1">
      <button type="button">看看我</button>
    </div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    .border-button-demo {
      &.demo-1 {
        display: inline-block;
        position: relative;
        &:hover {
          &::before {
            content: "";
            z-index: 10;
            position: absolute;
            border-top-left-radius: 3px;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
            animation: border-button-top-right 1s infinite ease-in-out both;
          }
          &::after {
            content: "";
            z-index: 10;
            position: absolute;
            border-top-right-radius: 3px;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            animation: border-button-bottom-right 1s infinite ease-in-out both;
          }
        }
        button {
          position: relative;
          padding: 1.2rem 2rem;
          line-height: 1;
          background: #fff;
          border-width: 0;
          background: #eee;
          color: #606266;
          text-align: center;
          cursor: pointer;
          border-radius: 4px;
          outline: none;
          &:hover {
            color: #409eff;
            border-color: transparent;
            background-color: #ecf5ff;
            border-width: 0;
            &::before {
              content: "";
              z-index: 10;
              position: absolute;
              border-top-right-radius: 3px;
              border-bottom-left-radius: 3px;
              border-top-left-radius: 3px;
              animation: border-button-top-left 1s infinite ease-in-out both;
            }
            &::after {
              content: "";
              z-index: 10;
              position: absolute;
              border-bottom-right-radius: 3px;
              border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;
              animation: border-button-bottom-left 1s infinite ease-in-out both;
            }
            @keyframes border-button-top-left {
              0%, 100% {
                left: -.3rem;
                top: -.3rem;
                border: .6rem solid #409eff;;
                border-right-color: transparent;
                border-bottom-color: transparent;
              }
              50% {
                left: -.5rem;
                top: -.5rem;
                border: .6rem solid rgb(160, 207, 255);
                border-right-color: transparent;
                border-bottom-color: transparent;
              }
            }
            @keyframes border-button-bottom-left {
              0%, 100% {
                left: -.3rem;
                bottom: -.3rem;
                border: .6rem solid #409eff;
                border-right-color: transparent;
                border-top-color: transparent;
              }
              50% {
                left: -.5rem;
                bottom: -.5rem;
                border: .6rem solid rgb(160, 207, 255);
                border-right-color: transparent;
                border-top-color: transparent;
              }
            }
            @keyframes border-button-top-right {
              0%, 100% {
                right: -.3rem;
                top: -.3rem;
                border: .6rem solid #409eff;
                border-left-color: transparent;
                border-bottom-color: transparent;
              }
              50% {
                right: -.5rem;
                top: -.5rem;
                border: .6rem solid rgb(160, 207, 255);
                border-left-color: transparent;
                border-bottom-color: transparent;
              }
            }
            @keyframes border-button-bottom-right {
              0%, 100% {
                right: -.3rem;
                bottom: -.3rem;
                border: .6rem solid #409eff;
                border-left-color: transparent;
                border-top-color: transparent;
              }
              50% {
                right: -.5rem;
                bottom: -.5rem;
                border: .6rem solid rgb(160, 207, 255);
                border-left-color: transparent;
                border-top-color: transparent;
              }
            }
          }
        }
      }
    }

类似沙漏加载动画

  • 沙漏


    显示代码
    HTML
    1
    <div class="border-demo demo-7"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    .border-demo {
      position: relative;
      background: gray;
      color: #fff;
      text-align: center;
      cursor: pointer;
      &.demo-7 {
        position: relative;
        background-color: #fff;
        height: 50px;
        width: 36px;
        border-top: 2px solid gray;
        border-bottom: 2px solid gray;
        animation: border-demo-7 3.2s infinite ease-out;
        &::before {
          position: absolute;
          top: -1px;
          left: 3px;
          content: "";
          width: 26px;
          height: 23px;
          border-width: 0 2px 1px 2px;
          border-style: solid;
          border-color: gray;
          border-radius: 0 0 100% 100% / 0 0 180% 180%;
        }
        &::after {
          position: absolute;
          bottom: -1px;
          left: 3px;
          content: "";
          width: 26px;
          height: 23px;
          border-width: 1px 2px 0 2px;
          border-style: solid;
          border-color: gray;
          border-radius: 100% 100% 0 0 / 180% 180% 0 0;
        }
        @keyframes border-demo-7 {
          0% {
            transform: rotate(0deg);
          }
          35% {
            transform: rotate(181deg);
          }
          40%, 50% {
            transform: rotate(180deg);
          }
          85% {
            transform: rotate(361deg);
          }
          90%, 100% {
            transform: rotate(360deg);
          }
        }
      }
    }

跳跳跳

  • 左右横跳


    显示代码
    HTML
    1
    <div class="jump-demo demo-1"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    .jump-demo {
      &.demo-1 {
        position: relative;
        height: 8rem;
        width: 16rem;
        border-bottom: 2px solid gray;
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 3rem;
          width: 3rem;
          height: 3rem;
          border-radius: 5px;
          background-color: gray;
          transform-origin: center center;
          animation: jump-demo-1 1.2s infinite ease-in-out alternate;
        }
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 10rem;
          width: 3rem;
          height: 3rem;
          border-radius: 5px;
          background-color: gray;
          transform-origin: -80% center;
          animation: jump-demo-2 1.2s infinite linear alternate, jump-demo-2-2 1.2s infinite ease;
        }
        @keyframes jump-demo-1 {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(7rem);
          }
        }
        @keyframes jump-demo-2 {
          0%, 20% {
            transform: rotate(0);
          }
          80%, 100% {
            transform: rotate(-180deg);
          }
        }
        @keyframes jump-demo-2-2 {
          0%, 80% {
            width: 3rem;
            height: 3rem;
          }
          82%, 86% {
            width: 3.5rem;
            height: 2.5rem;
          }
        }
      }
    }

  • 上下弹跳


    显示代码
    HTML
    1
    <div class="jump-demo demo-2"></div>
    SCSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    .jump-demo {
      &.demo-2 {
        position: relative;
        width: 10rem;
        height: 0.3rem;
        margin: 10rem 0 0 0;
        background-color: gray;
        animation: jump-demo-rubberBand 0.8s infinite ease;
        &::before {
          content: "";
          position: absolute;
          left: 3.5rem;
          bottom: 0;
          width: 3rem;
          height: 3rem;
          background-color: gray;
          border-radius: 5px;
          transform-origin: center;
          animation: jump-demo-top-bottom 0.8s infinite linear, jump-demo-rotate 1.5s infinite linear;
        }
        @keyframes jump-demo-rubberBand {
          0%, 40% {
            transform: scale3d(1,1,1);
          }
          50% {
            transform: scale3d(1.25,.75,1);
          }
          60%, 100% {
            transform: scale3d(1,1,1);
          }
        }
        @keyframes jump-demo-top-bottom {
          0% {
            bottom: 5rem;
          }
          3% {
            bottom: 4.9rem;
          }
          6% {
            bottom: 4.8rem;
          }
          9% {
            bottom: 4.7rem;
          }
          12% {
            bottom: 4.6rem;
          }
          15% {
            bottom: 4.5rem;
          }
          18% {
            bottom: 4.4rem;
          }
          21% {
            bottom: 4.3rem;
          }
          24% {
            bottom: 4.2rem;
          }
          50% {
            bottom: 0.3rem;
          }
          76% {
            bottom: 4.2rem;
          }
          79% {
            bottom: 4.3rem;
          }
          82% {
            bottom: 4.4rem;
          }
          85% {
            bottom: 4.5rem;
          }
          88% {
            bottom: 4.6rem;
          }
          91% {
            bottom: 4.7rem;
          }
          94% {
            bottom: 4.8rem;
          }
          97% {
            bottom: 4.9rem;
          }
          100% {
            bottom: 5rem;
          }
        }
        @keyframes jump-demo-rotate {
          0% {
            transform: rotate(0);
          }
          100% {
            transform: rotate(270deg);
          }
        }
      }
    }
上一页
2020-05-26 20:44:52 #CSS #动画设计
下一页