我正在尝试使用 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。
(注意: 要更改动画速度增量或减量变量 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/
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail
我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
