css - 如何增加刻度线动画的大小
问题描述
我正在尝试向我的网站添加一个动画刻度,但我现在想将此刻度调整为 3-4 倍。
CSS:
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
HTML:
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
我正在尝试增加它的大小,但能够增加外圆的大小,但不能增加刻度线的大小。请建议
解决方案
由于“tic”的路径在之后只有小写命令,因此M
很容易移动。我已将路径更改为:d="M-11.9 27.2l7.1 7.2 16.7-16.8"
现在14.1 - 26 = -11.9
我可以转换tic
使用比例。我正在使用transform="scale(1.5)...
,但你可以使用你需要的规模。缩放后,我正在翻译中心的“tic”translate(26,0)
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 3;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #7ac142;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark__check" fill="none" d="M-11.9 27.2l7.1 7.2 16.7-16.8" transform="scale(1.5) translate(26,0)"/>
</svg>
推荐阅读
- excel - 有没有办法使用自动化将图片从内存加载到 excel 中?
- google-cloud-platform - GCP:无法连接到 Datalab
- python - 仅返回 x 变量方程之前的数字
- javascript - 如何在 react-native 中使用 node.js 和 Socket.io 实现实时聊天?
- c++ - C++ OpenCV卡尔曼滤波器构造函数错误
- grep - GREP:如何匹配正数或负数?
- python - 在python中使用带有多个and条件的when语句
- javascript - 切换具有多个值的选择器 CSS
- windows - 使用十字符号签名
- javascript - 捆绑的 Webextension 看不到 JQuery