Jquery 设置对角线查询的动画

我想知道是否有人知道如何使用jquery创建一条对角线，并设置它的动画，这样当它出现时，它就会被绘制出来，而不是仅仅出现

也需要同样的圆

一个简单的jsfiddle就太棒了

---

非常感谢你的帮助

您实际上可以使用纯CSS来实现：

对角线的 HTML：

<div class='box'></div>

.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; }
}

<div class='circle'>
  <div class='cover'></div>
</div>

.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); }
}

---

圆圈 HTML：

<div class='box'></div>

.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; }
}

<div class='circle'>
  <div class='cover'></div>
</div>

.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); }
}

---

性感和完美的我期待做什么，邦整洁，谢谢你非常多，所以我有以上所有的工作，伟大的，但我不能让它做我想要的，我希望能够改变角度，而不移动线等等，有什么想法吗。。？我想把它改成，比方说，45度，它不会移动到演示之外吗？