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>
|
近期评论