Javascript CSS动画复选标记
我想要一个动画的复选标记CSS(用SVG动画绘制复选标记的动画),我像下面的代码一样尝试了,但它不起作用。我该怎么办 演示: CSS: JS:Javascript CSS动画复选标记,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想要一个动画的复选标记CSS(用SVG动画绘制复选标记的动画),我像下面的代码一样尝试了,但它不起作用。我该怎么办 演示: CSS: JS: 由于您使用的是css文件,因此需要将SCS转换为css 下面是一个演示: 。勾选圆圈{ 笔划阵列:166; 行程偏移量:166; 笔画宽度:2; 行程限制:10; 行程:#7ac142; 填充:无; 动画:向前划0.6s立方贝塞尔(0.65,0,0.45,1); } .对号{ 宽度:56px; 高度:56px; 边界半径:50%; 显示:块; 笔画宽
由于您使用的是css文件,因此需要将SCS转换为css
下面是一个演示:
。勾选圆圈{
笔划阵列:166;
行程偏移量:166;
笔画宽度:2;
行程限制:10;
行程:#7ac142;
填充:无;
动画:向前划0.6s立方贝塞尔(0.65,0,0.45,1);
}
.对号{
宽度:56px;
高度:56px;
边界半径:50%;
显示:块;
笔画宽度:2;
冲程:#fff;
行程限制:10;
利润率:10%自动;
盒影:插图0px 0px 0px#7ac142;
动画:填充。4s慢进慢出。4s向前,缩放。3s慢进慢出。9s两者皆有;
}
.checkmark\u检查{
变换原点:50%50%;
行程:48;
行程偏移量:48;
动画:向前划0.3s立方贝塞尔(0.65,0,0.45,1)0.8s;
}
@关键帧笔划{
100% {
笔划偏移:0;
}
}
@关键帧比例{
0%, 100% {
转化:无;
}
50% {
转换:scale3d(1.1,1.1,1);
}
}
@关键帧填充{
100% {
盒影:插图0px 0px 0px 30px#7ac142;
}
}
更新答案。非常感谢。欢迎光临!如果您不熟悉SCS,最好对其进行一些研究。我再次更新了我的答案,其中提供了一些关于SASS和SCSS的信息。我如何放大这幅美丽的动画?@Vingtoft,请看这个演示放大它:--这个演示演示放大50像素-通过CSS部分,查找被注释掉的内容:/*最初的##px*/
——只需根据您的喜好更改您看到此注释的位置的值-可以变小或变大:)希望有帮助!欢迎来到堆栈溢出!请查看我们的SO问题清单,以帮助您提出一个好问题,从而得到一个好答案。“不起作用”是不清楚的。你做了什么?结果如何?你期待什么?
@import "bourbon";
$color--green: #7ac142;
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: $color--green;
fill: none;
animation: stroke .6s $curve 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 $color--green;
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 .3s $curve .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 $color--green;
}
}
<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>