画一个检查CSS动画从左右下向上 [英] draw a check css animation from left down to right up
问题描述
我想从左边下去与CSS动画往上走右边画一个对勾。我左边下去一部分，但要备份似乎并不工作。它从右侧向下。有谁知道我怎么能做出这种更顺畅，实际上看起来像被的支票？
下面是我的code：
#kick {
高度：150像素;
宽度：20像素;
背景：绿色;
-webkit-变换：旋转（45deg）;
位置：相对;
顶部：-24px;
左：273px;}
＃干{
高度：60像素;
宽度：20像素;
背景：绿色;
-webkit-变换：旋转（-45deg）;
位置：相对;
顶：100像素;
左：200像素;
}
@ -webkit-关键帧DRAW1 {
从{身高：0; }
为{高度：60像素}
}
@ -webkit-关键帧DRAW2 {
从{
高度：0;
}
至{
高度：150像素;
}
}
.draw1 {
-webkit-动画名称：DRAW1;
-webkit-动画持续时间：0.5秒;
}
.draw2 {
-webkit-动画名称：DRAW2;
-webkit-动画持续时间：0.5秒;
}
下面是一个JS小提琴： http://jsfiddle.net/awayF/281/
我会非常AP preciate在得到这部动画正确任何帮助！此外，由于我使用jQuery无论如何，这是否可以更有效地在jQuery中/ JS来实现，那也没关系。
好了，这是用我的方法＆LT;帆布方式＆gt; 和JavaScript
上的提琴演示-----> 方角 | 圆角
（注意：要改变动画的速度递增或递减变量 animationSpeed 下数yeilds更高的速度）
VAR开始= 100;\r
VAR中旬= 145;\r
VAR年底= 250;\r
变种宽度= 20;\r
VAR leftX =启动;\r
VAR左撇子=启动;\r
VAR rightX =中旬 - （宽/ 2.7）;\r
VAR右倾= +中期（宽/ 2.7）;\r
变种animationSpeed = 20;\r
\r
VAR CTX = document.getElementsByTagName（'画布'）[0] .getContext（'2D'）;\r
ctx.lineWidth =宽度;\r
ctx.strokeStyle ='RGBA（0，150，0，1）';\r
\r
对于（i =启动; I＆LT;中旬，我++）{\r
VAR drawLeft = window.setTimeout（函数（）{\r
ctx.beginPath（）;\r
ctx.moveTo（启动，启动）\r
ctx.lineTo（leftX，左撇子）;\r
ctx.stroke（）;\r
leftX ++;\r
左撇子++;\r
}，1 +（ⅰ* animationSpeed）/ 3）;\r
}\r
\r
对于（i =中旬; I＆LT; END;我++）{\r
VAR drawRight = window.setTimeout（函数（）{\r
ctx.beginPath（）;\r
ctx.moveTo（leftX，左撇子）;\r
ctx.lineTo（rightX，用右手）;\r
ctx.stroke（）;\r
rightX ++;\r
右倾 - ;\r
}，1 +（ⅰ* animationSpeed）/ 3）;\r
} \r
＆LT;帆布HEIGHT =160＆GT;＆LT; /帆布＆GT; \r
您也可以做到这一点使用 SVG 和CSS 动画。
1。方角：
{＃检查\r
补：无;\r
行程：绿色;\r
笔画宽度：20;\r
行程dasharray：180;\r
行程dashoffset：180;\r
-webkit-动画：绘制2S无限放心;\r
动画：绘制2S无限放心;\r
}\r
-webkit- @关键帧画{\r
至 {\r
行程dashoffset：0;\r
}\r
}\r
@keyframes画{\r
至 {\r
行程dashoffset：0;\r
}\r
} \r
＆LT; SVG WIDTH =150HEIGHT =150＆GT;\r
＆LT;路径ID =检查D =M10,30 l30,50 L95，-70/＆GT;\r
＆LT; / SVG＆GT; \r
2。圆角：
{＃检查\r
补：无;\r
行程：绿色;\r
笔画宽度：20;\r
中风的linecap：圆形;\r
行程dasharray：180;\r
行程dashoffset：180;\r
动画：绘制2S无限放心;\r
}\r
@keyframes画{\r
至 {\r
行程dashoffset：0;\r
}\r
} \r
＆LT; SVG WIDTH =150HEIGHT =150＆GT;\r
＆LT;路径ID =检查D =M10,50 l25,40 L95，-70/＆GT;\r
＆LT; / SVG＆GT; \r
I'm trying to draw a check mark from the left going down to the right going up with css animations. I got the left going down part, but going back up doesn't seem to working. It goes from right to down. Does anyone know how I can make this smoother and actually look like a check being drawn?
Here is my code:
#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;
}
Here is a JS Fiddle: http://jsfiddle.net/awayF/281/
I'd greatly appreciate any help in getting this animation right! Also, since I'm using jquery anyway, if this can be done more efficiently in jquery / js, that's fine too.
Well, this is my approach using <canvas> and JavaScript.
Demo on Fiddle -----> Square Corners | Round Corners
(Note: To change the animation speed increment or decrement the variable animationSpeed. Lower number yeilds Higher speed)
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>
You could also do this using svg and CSS animation.
1. Square Corners:
#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. Round Corners:
#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>
这篇关于画一个检查CSS动画从左右下向上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
