动画对角线查询 [英] Animate diagonal line query
本文介绍了动画对角线查询的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道如果有人知道如何使用jquery创建一条对角线,并对其进行动画处理,这样当它出现时,它的绘制而不是仅仅出现。
I was wondering if anyone knows how to create a diagonal line using jquery and animate it so that when it appears its drawn on rather than just appears?
Muchos对于帮助!!
A simple jsfiddle would be awesome.
一个简单的jsfiddle将是真棒。 / p>
Muchos for the help!!
推荐答案
你可以用纯CSS实现:
You could actually do it with pure CSS:
HTML :
<div class='box'></div>
CSS :
.box {
overflow: hidden;
outline: dotted 1px;
width: 8.09em; height: 5.88em;
background: linear-gradient(36deg,
transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%)
no-repeat -8.09em -5.88em;
background-size: 100% 100%;
animation: drawDiag 2s linear forwards;
}
@keyframes drawDiag {
to { background-position: 0 0; }
}
Circle
HTML :
<div class='circle'>
<div class='cover'></div>
</div>
CSS :
.circle {
overflow: hidden;
position: relative;
width: 10em; height: 10em;
}
.circle:before {
position: absolute;
width: inherit; height: inherit;
border-radius: 50%;
box-shadow: inset 0 0 0 1px black;
content: '';
}
.cover {
position: absolute;
margin: 0 -50%;
width: 200%; height: inherit;
transform-origin: 50% 0;
background: white;
animation: revealCircle 5s linear forwards;
}
@keyframes revealCircle {
to { transform: rotate(180deg); }
}
这篇关于动画对角线查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文