analysis

下载按钮

分析
这个效果大概分成几个部分
- 静态按钮
- 点击后按钮宽度变小，然后成圆形
- 按钮变大变小
- 小白球转圈
- 回到圆中心位置，显示“√”
基于分析，静态效果很容易实现。

对于紫色的小球变大变小也很简单。scale即可

如果使用了translate属性，需要将translate属性写在scale之前。


xxxxxxxxxx
15
1
@keyframes circle{
2
    0%,15%,45%,75%{
3
        transform:translate(-50%,-50%) scale(0.8) ;
4
5
6
    }
7
    30%,60%,90%{
8
        transform:translate(-50%,-50%) scale(1.2) ;
9
10
    }
11
    100%{
12
        transform: translate(-50%,-50%) scale(1) ;
13
14
    }
15
}

小白球旋转


xxxxxxxxxx
1
@keyframes dot{
2
    8%{
3
        transform: scale(0);
4
    }
5
    16%{
6
        transform: scale(1) rotate(30deg) translateX(48px);
7
8
    }
9
    95%{
10
        transform: scale(1) rotate(1000deg) translateX(48px);
11
    }
12
    100%{
13
        transform: scale(0.125) rotate(1050deg) translate(52px );
14
    }
15
}

点击效果可以使用伪类focus模拟

完整代码


xxxxxxxxxx
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
    <style>
8
      @keyframes circle {
9
        0%,
10
        15%,
11
        45%,
12
        75% {
13
          transform: translate(-50%, -50%) scale(0.8);
14
        }
15
16
        30%,
17
        60%,
18
        90% {
19
          transform: translate(-50%, -50%) scale(1.2);
20
        }
21
22
        100% {
23
          transform: translate(-50%, -50%) scale(1);
24
        }
25
      }
26
27
      @keyframes dot {
28
        8% {
29
          transform: scale(0);
30
        }
31
32
        16% {
33
          transform: scale(1) rotate(30deg) translateX(48px);
34
        }
35
36
        95% {
37
          transform: scale(1) rotate(1000deg) translateX(48px);
38
        }
39
40
        100% {
41
          transform: scale(0.125) rotate(1050deg) translate(52px);
42
        }
43
      }
44
45
      body {
46
        background-color: #000;
47
      }
48
49
      .button {
50
        display: block;
51
        width: 160px;
52
        height: 41px;
53
        background: transparent;
54
        border-radius: 10px;
55
        color: white;
56
        border: none;
57
        outline: none;
58
        cursor: pointer;
59
        margin: 100px auto;
60
        position: relative;
61
      }
62
63
      .button::after,
64
      .button::before {
65
        content: "";
66
        position: absolute;
67
        left: 50%;
68
        top: 50%;
69
        transform: translate(-50%, -50%);
70
        transform-origin: 50% 50%;
71
      }
72
73
      .button::before {
74
        width: 100%;
75
        height: 100%;
76
        background-color: #6d58ff;
77
        border-radius: 10px;
78
        transition: all 0.5s;
79
      }
80
81
      .button:focus::before {
82
        width: 41px;
83
        height: 41px;
84
        border-radius: 50%;
85
        animation: circle 3s linear forwards;
86
      }
87
88
      .button:focus span {
89
        display: none;
90
      }
91
92
      .button::after {
93
        content: "";
94
        width: 16px;
95
        height: 16px;
96
        background: #fff;
97
        z-index: 2;
98
        border-radius: 50%;
99
        transform: scale(0);
100
        /* 设置外部白色圆圈的圆心位置 */
101
        transform-origin: 0 0;
102
      }
103
104
      .button:focus::after {
105
        animation: dot 3s linear forwards;
106
      }
107
108
      .button span {
109
        position: relative;
110
        z-index: 1;
111
      }
112
113
      .button svg {
114
        width: 15px;
115
        height: 13px;
116
        display: block;
117
        position: absolute;
118
        left: 50%;
119
        top: 50%;
120
        stroke: #fff;
121
        stroke-width: 2px;
122
        stroke-linecap: round;
123
        stroke-linejoin: round;
124
        fill: none;
125
        transform: translate(-50%, -50%);
126
        stroke-dasharray: 17px;
127
        stroke-dashoffset: 17px;
128
        transition: stroke-dashoffset 0.3s ease;
129
        transition-delay: 3s;
130
      }
131
132
      .button:focus svg {
133
        stroke-dashoffset: 34px;
134
      }
135
    </style>
136
  </head>
137
138
  <body>
139
    <button class="button">
140
      <span>下载</span>
141
      <svg view-Box="0 0 15 13">
142
        <polyline points="2 6.5 6 10.5 13 2.5"></polyline>
143
      </svg>
144
    </button>
145
  </body>
146
</html>