CSS100Day(10)-SVG旋转动画

设计简介#

本次练习主要做个旋转的圈，使用SVG的圆stroke来实现，其中有两个关键点：

关键点1：stroke-dasharray属性表示svg边实线和虚线数组，如果该属性值大于SVG整个长度，则全部实现，例如：周长100，该属性设置50，那么实线50，虚线50

stroke-dashoffset属性表示有点类似“延迟”的概念，就是实现延迟（左移）长度，即如果svg线（圆）长度100，该属性设置50，stroke-dasharray设置100，那么实线延迟了50，长度为50
关键点2：做到spinner在翻转，使用rotate是做不到的，需要scaleY(-1)，按Y轴旋转，看@keyframe spin代码

效果展示#

20150115，星期四

11:42

1248 大卡

实现代码和步骤#

HTML部分#

HTML就是绘制svg的一个圆

1
<div class="frame">
2
    <div class="center">
3
        <svg class="spinner" viewbox="0 0 202 202" xmlns="https://www.w3.org/2000/svg">
4
            <circle cx="101" cy="101" r="99.5"></circle>
5
        </svg>
6

7
        <div class="date">20150115，星期四</div>
8
        <div class="time">11:42</div>
9
        <img class="beat" src="./heart.svg" alt="心跳" />
10
        <div class="energy">1248 大卡</div>
11
    </div>
12
</div>

CSS部分#

非关键部分如下，主要是其他内容

1
:root {
2
    --speed: 3s;
3
}
4

5
.frame {
6
    width: 400px;
7
    height: 400px;
8
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
9
    background: #4c4c4c;
10
    color: #fff;
11
    font-size: 12px;
12
    line-height: 100%;
13
    text-transform: uppercase;
14
    border-radius: 2px;
15
}
16

17
.center {
18
    position: absolute;
19
    width: 212px;
20
    height: 212px;
21
    top: 87px;
22
    left: 87px;
23
    background: #242424;
24
    border: 7px solid #3a3a3a;
25
    border-radius: 50%;
26
    text-align: center;
27
}
28

29
.date {
30
    position: absolute;
31
    top: 68px;
32
    width: 100%;
33
}
34

35
.time {
36
    position: absolute;
37
    top: 80px;
38
    width: 100%;
39
    font-weight: 700;
40
    font-size: 40px;
41
    line-height: 100%;
42
    margin: 4px 0;
43
}
44

45
.beat {
46
    position: absolute;
47
    left: 50%;
48
    top: 125px;
49
    width: 20px;
50
    height: 20px;
51
    transform: translateX(-220%);
52
    animation: beat 0.8s ease-in-out infinite alternate-reverse;
53
}
54

55
.energy {
56
    position: absolute;
57
    top: 128px;
58
    left: 50%;
59
    transform: translateX(-30%);
60
}
61

62
@keyframes beat {
63
    0% {
64
        scale: 1;
65
        transform: translateX(-220%);
66
    }
67
    100% {
68
        scale: 1.2;
69
        transform: translateX(-185%);
70
    }
71
}

关键部分就是svg的两个关键属性stroke-dasharray和stroke-dashoffset

其次就是最关键的scaleY(-1)

1
.spinner {
2
    position: absolute;
3
    width: 202px;
4
    height: 202px;
5
    border-radius: 50%;
6
    top: 5px;
7
    left: 5px;
8

9
    circle {
10
        stroke: #f85b58;
11
        stroke-width: 3px;
12
        fill: none;
13
        /* 实线长度-一个也表示虚线长度-目前625就是周长 */
14
        stroke-dasharray: 625;
15
        transform-origin: 50% 50%;
16
        /* 默认svg圆开始从右边开始，所以这里旋转到顶部开始 */
17
        transform: rotate(-90deg);
18
        animation: spin var(--speed) ease-in-out infinite;
19
    }
20
}
21

22
@keyframes spin {
23
    0% {
24
        stroke-dashoffset: 625;
25
        transform: rotate(-90deg) scaleY(1);
26
    }
27
    50% {
28
        /* 关键2：该属性是实现延迟多久出现，这里设置不延迟就充满整个圆 */
29
        stroke-dashoffset: 0; // [!code highlight]
30
        /* 关键1：scaleY(-1)按照Y轴翻转，不要旋转哈 */
31
        transform: rotate(-90deg) scaleY(1); // [!code highlight]
32
    }
33
    50.001% {
34
        stroke-dashoffset: 0;
35
        transform: rotate(-90deg) scaleY(-1);
36
    }
37
    100% {
38
        stroke-dashoffset: 625;
39
        transform: rotate(-90deg) scaleY(-1);
40
    }
41
}

设计简介#

效果展示#

实现代码和步骤#

HTML部分#

CSS部分#

评论区

目录