svg基础知识–圆
标签：circle
基本属性：
cx:圆x坐标
cy:圆y坐标
r:半径
样式:
| css属性 |
说明 |
值 |
| fill |
填充颜色 |
none |
| stroke |
描边颜色 |
#00B51D |
| stroke-width |
描边宽度 |
5 |
| stroke-linecap |
开放路径两端的形状 |
round |
| stroke-dasharray |
创建虚线 |
44, 44 |
| transform-origin |
变换中心 |
center |
problem:
1.开放路径两端的形状是什么意思呢?
被虚线分割之后有两个端点，设置其形状
2.创建虚线–难点
一个参数：虚线长度和每段虚线之间的间距
两个参数：虚线长度 | 虚线间距
解释：虚线是指空的不显示的区块
实战：豆瓣loading图
分析动画过程–重要
嘴巴
嘴巴是一个半圆的描边样式，那么虚线长度就是圆周长的1/2,所以为44,间距与其相等为44
stroke-dasharray: 44, 44;
嘴巴动画
动画为两圈，第一圈嘴巴变大为3/4,就是间距变小为22,最后有一个停留的时间
1
2
3
4
5
6
7
8
9
10
|
@keyframes mouthAni {
40% {
stroke-dasharray: 44, 22;
}
80%,
100% {
stroke-dasharray: 44, 44;
transform: rotate(720deg);
}
}
|
眼睛
当虚线为0时，可以得到无数个点状的圆，间距为1/4，即22
stroke-dasharray: 0, 66;
眼睛动画–复杂
睛部分同样是旋转了两圈，并且在旋转第一圈的时候，两边的间距增大为7/8，在第二圈的时候，间距恢复为3/4，且最后有一段的停留时间。
产出代码
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
|
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
.mouth {
fill: none;
stroke: #00b51d;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 44, 44;
transform-origin: center;
animation: mouthAni 2.3s ease-out infinite;
}
.eye {
fill: none;
stroke: #00b51d;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 0, 66;
transform-origin: center;
transform: rotate(-45deg);
animation: eyeAni 2.3s ease-in-out infinite;
}
@keyframes mouthAni {
40% {
stroke-dasharray: 44, 22;
}
80%,
100% {
stroke-dasharray: 44, 44;
transform: rotate(720deg);
}
}
@keyframes eyeAni {
40% {
stroke-dasharray: 0, 77;
}
80%,
100% {
transform: rotate(675deg);
stroke-dasharray: 0, 66;
}
}
</style>
</head>
<body>
<svg width="100" height="100">
<circle class="mouth" cx="50" cy="50" r="14"></circle>
<circle class="eye" cx="50" cy="50" r="14"></circle>
</svg>
<script src="src/index.js"></script>
</body>
</html>
|
近期评论