我正在尝试使用 CSS 动画从左下到右上绘制复选标记。我得到了左边的下降部分,但回去似乎并没有奏效。它从右到下。有谁知道我如何才能使它更平滑并且看起来像正在开出的支票?
setTimeout(function() {
$('#kick').addClass('draw2');
}, 500);
#kick {
height: 150px;
width: 20px;
background: green;
-webkit-transform: rotate(45deg);
position: relative;
top: -24px;
left: 273px;
}
#stem {
height: 60px;
width: 20px;
background: green;
-webkit-transform: rotate(-45deg);
position: relative;
top: 100px;
left: 200px;
}
@-webkit-keyframes draw1 {
from {
height: 0;
}
to {
height: 60px
}
}
@-webkit-keyframes draw2 {
from {
height: 0;
}
to {
height: 150px;
}
}
.draw1 {
-webkit-animation-name: draw1;
-webkit-animation-duration: 0.5s;
}
.draw2 {
-webkit-animation-name: draw2;
-webkit-animation-duration: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="checkmark">
<div class="draw1" id="stem"></div>
<div id="kick"></div>
</span>
如果您能帮助我制作正确的动画,我将不胜感激!此外,由于我无论如何都在使用 jQuery,如果可以在 jQuery/JavaScript 中更有效地完成此操作,那也很好。
最佳答案
好吧,这是我使用 <canvas>
的方法和 JavaScript。
fiddle 演示 -----> Square Corners | Round Corners
(注意: 要更改动画速度增量或减量变量 animationSpeed
。数字越低速度越高)
var start = 100;
var mid = 145;
var end = 250;
var width = 20;
var leftX = start;
var leftY = start;
var rightX = mid - (width / 2.7);
var rightY = mid + (width / 2.7);
var animationSpeed = 20;
var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.lineWidth = width;
ctx.strokeStyle = 'rgba(0, 150, 0, 1)';
for (i = start; i < mid; i++) {
var drawLeft = window.setTimeout(function() {
ctx.beginPath();
ctx.moveTo(start, start);
ctx.lineTo(leftX, leftY);
ctx.stroke();
leftX++;
leftY++;
}, 1 + (i * animationSpeed) / 3);
}
for (i = mid; i < end; i++) {
var drawRight = window.setTimeout(function() {
ctx.beginPath();
ctx.moveTo(leftX, leftY);
ctx.lineTo(rightX, rightY);
ctx.stroke();
rightX++;
rightY--;
}, 1 + (i * animationSpeed) / 3);
}
<canvas height="160"></canvas>
您也可以使用 svg
来做到这一点和 CSS animation
.
<强>1。方 Angular :
#check {
fill: none;
stroke: green;
stroke-width: 20;
stroke-dasharray: 180;
stroke-dashoffset: 180;
-webkit-animation: draw 2s infinite ease;
animation: draw 2s infinite ease;
}
-webkit-@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="150" height="150">
<path id="check" d="M10,30 l30,50 l95,-70" />
</svg>
<强>2。圆 Angular :
#check {
fill: none;
stroke: green;
stroke-width: 20;
stroke-linecap: round;
stroke-dasharray: 180;
stroke-dashoffset: 180;
animation: draw 2s infinite ease;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="150" height="150">
<path id="check" d="M10,50 l25,40 l95,-70" />
</svg>
关于javascript - 从左下到右上绘制复选标记CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26558916/