如何制作像 'marching ants' 这样平滑的虚线边框旋转动画

Question

我正在制作使用 'cogs and chains' 的 css 动画，但无法创建 'smooth' 边框旋转序列。

您可以在此 fiddle 中看到我（当前）如何使用伪元素生成 'rotation' 效果。这是通过 'switching' 在虚线白色和虚线金色边框之间完成的，使其看起来像 'border is rotating'.

我有什么

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

 position:absolute;
    top:30px;
    left:42px;
    width:80px;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/******************************************************************************/

.chain{
    height:70px;
    width:80%;
    border:5px dashed gold;
    border-radius:30px;
    position:absolute;
    top:30px;
    left:40px;
          -webkit-animation: switchGoldBlackBorder 0.8s infinite; /* Safari 4+ */
  -moz-animation:    switchGoldBlackBorder 0.8s infinite; /* Fx 5+ */
  -o-animation:      switchGoldBlackBorder 0.8s infinite; /* Opera 12+ */
  animation:         switchGoldBlackBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-moz-keyframes switchBlackGoldBorder{
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-o-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@keyframes switchBlackGoldBorder {  
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}



.chain:after{
    content:"";
    position:absolute;
    height:70px;
    border-radius:30px;
    width:100%;
    top:-5px;
    left:-5px;
    border:5px solid gold;
    z-index:-1;
          -webkit-animation: switchBlackGoldBorder 0.8s infinite; /* Safari 4+ */
  -moz-animation:    switchBlackGoldBorder 0.8s infinite; /* Fx 5+ */
  -o-animation:      switchBlackGoldBorder 0.8s infinite; /* Opera 12+ */
  animation:         switchBlackGoldBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-moz-keyframes switchGoldBlackBorder{
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-o-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@keyframes switchGoldBlackBorder {  
    0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}

<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <use xlink:href="#one"/>    
</svg>
<div class="chain"></div>

因此，在代码片段的下半部分，您可以看到我是如何通过使用关键帧生成 'rotating chain effect' 的。

---

我想要什么

我的总体愿望是生成如下内容：

想想传送带的横截面，又是怎样的'gears at the end drive the belt'。我正在尝试重现这一点。 （即虚线边框的金色部分应该在齿轮的槽内，'be pulled'靠它）

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */
border:5px dashed gold;
  border-radius:50%;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

但金色破折号适合齿轮的凹槽，并且占屏幕宽度的 80%（如果有意义的话）。

最后，我想生成如下图所示的内容：

看看我希望链条如何 'rotate'？

---

我当前的问题

• 由于动画是 'hacked' 通过使用伪元素，我发现很难同步这个 'chain' 的旋转。
• 我还在学习关键帧动画，所以我确定这不是最好的方法
• 同样，svg 对我来说是一个新概念，所以请原谅我不愿意使用它（因此我使用 css 作为 'chain'）
• 最后，我想 'make it look like' 齿轮正在转动链条，但现在它们看起来完全（而且做得很糟糕）独立的元素动画

---

Answer 1

您可以尝试编辑 cog 使其更适合而不是调整 div 边框以使其在 cog 上就位。比css.

更容易操作图形

然后可能会将链式动画分成三个或四个部分，以使其更健壮。

然后你可以调整齿轮和链条的速度以匹配，隐藏链条的一半，添加到它 div 只有顶部和底部边框，并在另一端做相同但相反的事情。 （使用裁剪、位置和 z-index）。

像这样：

至少在理论上，这将是我的方法（更不用说我会使用 JS 而不是这个工作流程）。

Answer 2

齿轮和链条动画：

我完全重构了代码（CSS和HTML），现在是:

• 更短（特别是 css）
• 更简单
• 更现实：更正了链条和齿轮之间的同步问题，并在右侧添加了一个缺失的齿轮，因为您的链条似乎漂浮在空中：

DEMO

方法是一样的，为齿轮的旋转角度设置动画，为链条路径设置 dash-offset 的动画。我调整了两个动画之间的时间，让它看起来好像齿轮在拉动链条。

浏览器支持：

作为 IE doesn't support the svg animate element I also made this version of the animation with the snap.svg library that also supports IE9 and over (tested in IE9 with crossbrowsertesting).

DEMO 支持 IE

var cont   = new Snap('#svg'),
    chain  = cont.select('#chain'),
    cogAcw = cont.select('#cog_acw'),
    cogCw  = cont.select('#cog_cw'),
    speed  = 500;  // Lower this number to make the animation faster

function infChain(el) {
    var len = el.getTotalLength();
    el.attr({"stroke-dasharray": len/62,"stroke-dashoffset": 0});
    el.animate({"stroke-dashoffset": -len/31}, speed, mina.linear, infChain.bind(null, el));
}
function rotateAcw(el) {
    el.transform('r22.5,20,20');
    el.animate({ transform: 'r-22.5,20,20' }, speed, mina.linear, rotateAcw.bind( null, el));
}
function rotateCw(el) {
    el.transform('r0,20,20');
    el.animate({ transform: 'r45,20,20' }, speed, mina.linear, rotateCw.bind( null, el));
}
infChain(chain);
rotateAcw(cogAcw);
rotateCw(cogCw);

svg {
    width:100%;
}

<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
    <defs>
        <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4" />
        <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16" />
        <g id="cog_acw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
        <g id="cog_cw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
    </defs>
    <path id="chain" stroke-width="1" stroke="#000" fill="transparent" 
    d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89.4 26.5 89.4 13.5 80.8 13.5z" />
    <use  xlink:href="#cog_acw" />
    <use  transform="translate(60.5 0), rotate(19,20,20)" xlink:href="#cog_acw" />
    <use  transform="translate(-4.5 -4.5),scale(.8), rotate(0,20,20)" xlink:href="#cog_cw" />    
</svg>

---

svg{width:100%;}
#chain_st{
  -webkit-animation: dash 1s infinite linear;
  -moz-animation: dash 1s infinite linear;
  -o-animation: dash 1s infinite linear;
  animation: dash 1s infinite linear;
}
@-webkit-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@-moz-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@-o-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@keyframes dash {
  to { stroke-dashoffset: -5; }
}

<svg id="one" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
  <defs>
    <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4"/>
    <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16"/>
    <g id="cog">
      <use xlink:href="#c"/>
      <use xlink:href="#d"/>
      <use xlink:href="#d" transform="rotate(45 20 20)"/>
    </g>
  </defs>
  <g transform="translate(0,-7), scale(0.8), rotate(22.5 8 8)">
    <use xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-22.5 20 20" to="337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
  <path id="chain_st" stroke-width="1" stroke="#000" fill="transparent" stroke-dasharray="2.6 2.45" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
  <use class="rot" xlink:href="#cog">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate"from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
  </use>
  <g transform="translate(60.3 0)">
    <use class="" xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
</svg>

---

原回答：

您可以使用其他 svg 虚线路径并使用关键帧动画为虚线偏移设置动画 属性。

对于 "real world" 用途，这可以而且应该 simplified/tweaked :

• 所有元素都可以包含在一个 <svg> 标签中（这会使它更简单，并且两个齿轮 + 链可以一起调整大小）
• 链条和齿轮之间的同步不完美，speed/size 链条需要调整。

#one {
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Safari 4+ */
  -moz-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Fx 5+ */
  -o-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Opera 12+ */
  animation: rotateClockwiseAnimation 5s linear infinite;
  /* IE 10+, Fx 29+ */
}
#two {
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Safari 4+ */
  -moz-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Fx 5+ */
  -o-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Opera 12+ */
  animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* IE 10+, Fx 29+ */
  position: absolute;
  top: 30px;
  left: 42px;
  width: 80px;
}
@-webkit-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/******************************************************************************/

#chain {
  width: 650px;
  position: absolute;
  top: 24px;
  left: 35px;
}
.chain_st {
  stroke-dasharray: 1.5;
  stroke-dashoffset: 10;
  -webkit-animation: dash 18s infinite linear;
  -moz-animation: dash 18s infinite linear;
  -o-animation: dash 18s infinite linear;
  animation: dash 18s infinite linear;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
@-moz-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
@-o-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}

<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <defs>
    <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25" />
    <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85" />
  </defs>
  <use xlink:href="#c" />
  <use xlink:href="#d" />
  <use xlink:href="#d" transform="rotate(45, 50, 50)" />
</svg>

<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <use xlink:href="#one" />
</svg>
<svg id="chain" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 70 10">
  <path class="chain_st" stroke-width="0.5" stroke="#000" fill="transparent" d="M60 1 Q65 1 65 5 Q65 9 60 9 H6 Q1 9 1 5 Q1 1 6 1z" />
</svg>

Answer 3

这里是另一种使用CSS实现齿轮动画的方法。此方法已在 IE11、IE10、Firefox、Chrome、Opera 和 Safari 中测试

• gears/cogs 的两个圆形元素，带有插入 box-shadow 以生成内圆。牙齿由绕轴旋转的子元素（正常+伪）产生。
• 皮带的弯曲部分是使用与齿轮辐条相同的技术实现的，并且始终位于齿之间。
• 一个矩形容器元素，其顶部和底部边框使用线性渐变模拟。这个元素的背景（顶部和底部的渐变除外）是纯色，这是一个缺点。这种纯色用于隐藏两侧的一半圆形元素。
• 动画通过两种方式实现（a）不断旋转圆形元素和（b）不断改变渐变背景的背景位置。

.chain {
    margin: 45px auto;
    height: 100px;
    width: 310px;
    position: relative;
    background: -webkit-linear-gradient(0deg, gold 50%, transparent 50%), -webkit-linear-gradient(0deg, gold 50%, transparent 50%), white;
    background: -moz-linear-gradient(90deg, gold 50%, transparent 50%), -moz-linear-gradient(90deg, gold 50%, transparent 50%), white;
    background: linear-gradient(90deg, gold 50%, transparent 50%), linear-gradient(90deg, gold 50%, transparent 50%), white;
    background-size: 41px 5px;
    background-repeat: repeat-x;
    background-position: 20px 0px, 20px 95px;
    -webkit-animation: bgPos 1s infinite linear;
    -moz-animation: bgPos 1s infinite linear;
    animation: bgPos 1s infinite linear;
}
.belt, .belt-after, .belt .spokes, .belt .spokes:before, .belt .spokes:after, .belt-after .spokes, .belt-after .spokes:before, .belt-after .spokes:after {
    position: absolute;
    content:'';
    height: 90px;
    width:15px;
    top: 0px;
    border-top: 5px solid gold;
    border-bottom: 5px solid gold;
    z-index: -1;
}
.belt, .belt-after {
    -webkit-animation: borderAnim 8s infinite linear;
    -moz-animation: borderAnim 8s infinite linear;
    animation: borderAnim 8s infinite linear;
}
.belt .spokes, .belt-after .spokes {
    top: -5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.belt .spokes:before, .belt-after .spokes:before {
    top: -5px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}
.belt .spokes:after, .belt-after .spokes:after {
    top: -5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.belt {
    left: -16px;
}
.belt-after {
    right: -16px;
}
.gear {
    content:'';
    position: absolute;
    top: 5px;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    -webkit-animation: borderAnim 8s infinite linear;
    -moz-animation: borderAnim 8s infinite linear;
    animation: borderAnim 8s infinite linear;
    box-shadow: inset 0px 0px 0px 30px gray;
    z-index: 4;
}
.gear:before, .gear .spokes, .gear .spokes:before, .gear .spokes:after {
    position: absolute;
    content:'';
    height: 88px;
    width:15px;
    top: -5px;
    border-top: 6px solid gray;
    border-bottom: 6px solid gray;
}
.gear:before {
    left: 37px;
    -webkit-transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}
.gear .spokes {
    left: 37px;
    -webkit-transform: rotate(67.5deg);
    -moz-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}
.gear .spokes:before {
    top: -6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.gear .spokes:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}
.chain .belt + .gear {
    left:-52px;
}
.chain .belt-after + .gear {
    right: -52.5px;
}
.gear-small {
    content:'';
    position: absolute;
    left: -92px;
    top: -20px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    -webkit-animation: borderAnim 6s infinite linear reverse;
    -moz-animation: borderAnim 6s infinite linear reverse;
    animation: borderAnim 6s infinite linear reverse;
    box-shadow: inset 0px 0px 0px 20px gray;
    z-index: -2;
}
.gear-small:before {
    position: absolute;
    content:'';
    left: 21px;
    top: -3px;
    height: 48px;
    width: 10px;
    border-top:4px solid gray;
    border-bottom: 4px solid gray;
}
.gear-small .spokes, .gear-small .spokes:before, .gear-small .spokes:after {
    position: absolute;
    content:'';
    left: 21px;
    top: -3px;
    height: 48px;
    width: 10px;
    border-top:4px solid gray;
    border-bottom: 4px solid gray;
}
.gear-small .spokes {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.gear-small .spokes:before {
    left: 0px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}
.gear-small .spokes:after {
    left: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
@-webkit-keyframes borderAnim {
    0% {
        -webkit-transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes borderAnim {
    0% {
        -moz-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
@keyframes borderAnim {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@-webkit-keyframes bgPos {
    0% {
        background-position: 20px 0px, -20px 95px;
    }
    100% {
        background-position: -20px 0px, 20px 95px;
    }
}
@-moz-keyframes bgPos {
    0% {
        background-position: 20px 0px, -20px 95px;
    }
    100% {
        background-position: -20px 0px, 20px 95px;
    }
}
@keyframes bgPos {
    0% {
        background-position: 20px 0px, -20px 95px;
    }
    100% {
        background-position: -20px 0px, 20px 95px;
    }
}

<div class="chain">
    <div class="gear-small">
        <div class="spokes"></div>
    </div>
    <div class="belt">
        <div class="spokes"></div>
    </div>
    <div class="gear">
        <div class="spokes"></div>
    </div>
    <div class="belt-after">
        <div class="spokes"></div>
    </div>
    <div class="gear">
        <div class="spokes"></div>
    </div>
</div>

奖励： 这是带有 on/off 开关的整个动画 :) 单击（拉动）链柄以打开或关闭动画。

.container {
  position: relative;
}
.chain {
  margin: 45px 100px;
  height: 100px;
  width: 310px;
  position: relative;
  background: -webkit-linear-gradient(0deg, gold 50%, transparent 50%), -webkit-linear-gradient(0deg, gold 50%, transparent 50%), white;
  background: -moz-linear-gradient(90deg, gold 50%, transparent 50%), -moz-linear-gradient(90deg, gold 50%, transparent 50%), white;
  background: linear-gradient(90deg, gold 50%, transparent 50%), linear-gradient(90deg, gold 50%, transparent 50%), white;
  background-size: 41px 5px;
  background-repeat: repeat-x;
  background-position: 20px 0px, 20px 95px;
  -webkit-animation: bgPos 1s infinite linear;
  -moz-animation: bgPos 1s infinite linear;
  animation: bgPos 1s infinite linear;
}
.belt,
.belt-after,
.belt .spokes,
.belt .spokes:before,
.belt .spokes:after,
.belt-after .spokes,
.belt-after .spokes:before,
.belt-after .spokes:after {
  position: absolute;
  height: 90px;
  width: 15px;
  top: 0px;
  border-top: 5px solid gold;
  border-bottom: 5px solid gold;
  z-index: -1;
}
.belt,
.belt-after {
  -webkit-animation: borderAnim 8s infinite linear;
  -moz-animation: borderAnim 8s infinite linear;
  animation: borderAnim 8s infinite linear;
}
.belt .spokes,
.belt-after .spokes {
  top: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.belt .spokes:before,
.belt .spokes:after,
.belt-after .spokes,
.belt-after .spokes:before,
.belt-after .spokes:after {
  content: '';
}
.belt .spokes:before,
.belt-after .spokes:before {
  top: -5px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
.belt .spokes:after,
.belt-after .spokes:after {
  top: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.belt {
  left: -16px;
}
.belt-after {
  right: -16px;
}
.gear {
  position: absolute;
  top: 5px;
  height: 90px;
  width: 90px;
  border-radius: 100%;
  -webkit-animation: borderAnim 8s infinite linear;
  -moz-animation: borderAnim 8s infinite linear;
  animation: borderAnim 8s infinite linear;
  box-shadow: inset 0px 0px 0px 30px gray, inset 0px 0px 0px 40px white, inset 0px 0px 0px 50px tomato;
  z-index: 4;
}
.gear:before,
.gear .spokes,
.gear .spokes:before,
.gear .spokes:after {
  position: absolute;
  content: '';
  height: 88px;
  width: 15px;
  top: -5px;
  border-top: 6px solid gray;
  border-bottom: 6px solid gray;
}
.gear:before {
  left: 37px;
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}
.gear .spokes {
  left: 37px;
  -webkit-transform: rotate(67.5deg);
  -moz-transform: rotate(67.5deg);
  transform: rotate(67.5deg);
}
.gear .spokes:before {
  top: -6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.gear .spokes:after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
.chain .belt + .gear {
  left: -52px;
}
.chain .belt-after + .gear {
  right: -52.5px;
}
.gear-small {
  position: absolute;
  left: -91px;
  top: -20px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  -webkit-animation: borderAnim 8s 0.4s infinite linear;
  -moz-animation: borderAnim 6s infinite linear;
  animation: borderAnim 6s infinite linear;
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
  box-shadow: inset 0px 0px 0px 20px gray;
  z-index: -2;
}
.gear-small:before {
  position: absolute;
  content: '';
  left: 21px;
  top: -3px;
  height: 48px;
  width: 10px;
  border-top: 4px solid gray;
  border-bottom: 4px solid gray;
}
.gear-small .spokes,
.gear-small .spokes:before,
.gear-small .spokes:after {
  position: absolute;
  content: '';
  left: 21px;
  top: -3px;
  height: 48px;
  width: 10px;
  border-top: 4px solid gray;
  border-bottom: 4px solid gray;
}
.gear-small .spokes {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.gear-small .spokes:before {
  left: 0px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
.gear-small .spokes:after {
  left: 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
@-webkit-keyframes borderAnim {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes borderAnim {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@keyframes borderAnim {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes bgPos {
  0% {
    background-position: 20px 0px, -20px 95px;
  }
  100% {
    background-position: -20px 0px, 20px 95px;
  }
}
@-moz-keyframes bgPos {
  0% {
    background-position: 20px 0px, -20px 95px;
  }
  100% {
    background-position: -20px 0px, 20px 95px;
  }
}
@keyframes bgPos {
  0% {
    background-position: 20px 0px, -20px 95px;
  }
  100% {
    background-position: -20px 0px, 20px 95px;
  }
}
#pull-switch {
  display: none;
  /* no need to display checkbox */
}
#switch {
  position: absolute;
  left: 77px;
  top: 50px;
  border-right: 2px dotted tomato;
  height: 200px;
  width: 15px;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  transition: height 0.5s;
  z-index: 10;
}
#handle {
  display: block;
  position: absolute;
  /* left: width of chain div (15px) + half of border (1px) - radius of handle (8px)*/
  left: 8px;
  bottom: 0%;
  background-color: tomato;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer
}
#pull-switch:checked + #switch > #handle {
  background-color: seagreen;
}
#pull-switch:checked + #switch {
  height: 225px;
  border-color: seagreen;
}
#pull-switch ~ .chain .gear-small,
#pull-switch ~ .chain .belt,
#pull-switch ~ .chain .belt-after,
#pull-switch ~ .chain .gear,
#pull-switch ~ .chain {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}
#pull-switch:checked ~ .chain .gear-small,
#pull-switch:checked ~ .chain .belt,
#pull-switch:checked ~ .chain .belt-after,
#pull-switch:checked ~ .chain .gear,
#pull-switch:checked ~ .chain {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}
#pull-switch:checked ~ .chain .belt + .gear,
#pull-switch:checked ~ .chain .belt-after + .gear {
  box-shadow: inset 0px 0px 0px 30px gray, inset 0px 0px 0px 40px white, inset 0px 0px 0px 50px seagreen;
}

<div class="container">
  <input type="checkbox" id="pull-switch" />
  <div id="switch">
    <label for="pull-switch" id="handle"></label>
  </div>
  <div class="chain">
    <div class="gear-small">
      <div class="spokes"></div>
    </div>
    <div class="belt">
      <div class="spokes"></div>
    </div>
    <div class="gear">
      <div class="spokes"></div>
    </div>
    <div class="belt-after">
      <div class="spokes"></div>
    </div>
    <div class="gear">
      <div class="spokes"></div>
    </div>
  </div>
</div>

---

原答案：（由于虚线边框错误，在 Firefox 上不起作用，IE 中的虚线更接近，使其看起来很难看）。

您可以通过组合使用以下方法来实现边框旋转动画：

• 两个圆形元素（使用 border-radius: 50%），两侧带有虚线边框，形成边框的弯曲部分。
• 一个矩形容器元素，其顶部和底部边框使用 linear-gradient 模拟。这个元素的背景（顶部和底部的渐变除外）是纯色，这是一个缺点。这种纯色用于隐藏两侧的一半圆形元素。
• 动画通过两种方式实现 (a) 不断旋转圆形元素和 (b) 不断改变渐变背景的 background-position。
• 齿轮也是圆形元素，其中辐条由虚线边框制成，实心内部部分使用插图 box-shadow 生成。齿轮的旋转方式使得链条的边界始终位于齿轮的边界之间。

.chain {
  margin: 45px auto;
  height: 100px;
  width: 300px;
  position: relative;
  background: -webkit-linear-gradient(0deg, gold 50%, transparent 50%), -webkit-linear-gradient(0deg, gold 50%, transparent 50%), white;
  background: -moz-linear-gradient(90deg, gold 50%, transparent 50%), -moz-linear-gradient(90deg, gold 50%, transparent 50%), white;
  background: linear-gradient(90deg, gold 50%, transparent 50%), linear-gradient(90deg, gold 50%, transparent 50%), white;
  background-size: 30px 5px;
  background-repeat: repeat-x;
  background-position: 0px 0px, 5px 95px;
  -webkit-animation: bgPos 4s infinite linear;
  -moz-animation: bgPos 4s infinite linear;
  animation: bgPos 4s infinite linear;
}
.chain .before,
.chain .after {
  position: absolute;
  content: '';
  height: 90px;
  width: 90px;
  top: 0px;
  border-radius: 50%;
  border: 5px dashed gold;
  -webkit-animation: borderAnim 2s infinite linear;
  -moz-animation: borderAnim 2s infinite linear;
  animation: borderAnim 2s infinite linear;
  z-index: -2;
}
.chain .before {
  left: -45px;
}
.chain .after {
  right: -45px;
}
.chain .gear {
  content: '';
  position: absolute;
  top: 0px;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  border: 5px dashed gray;
  -webkit-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  transform: rotate(16deg);
  -webkit-animation: gearAnim 2s infinite linear;
  -moz-animation: gearAnim 2s infinite linear;
  animation: gearAnim 2s infinite linear;
  box-shadow: inset 0px 0px 0px 30px gray;
  z-index: 4;
}
.chain .before + .gear {
  left: -45px;
}
.chain .after + .gear {
  right: -45px;
}
.gear-small {
  content: '';
  position: absolute;
  left: -95px;
  top: -23px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 3px dashed gray;
  -webkit-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  transform: rotate(16deg);
  -webkit-animation: gearAnim 6s infinite linear reverse;
  -moz-animation: gearAnim 6s infinite linear reverse;
  animation: gearAnim 6s infinite linear reverse;
  box-shadow: inset 0px 0px 0px 20px gray;
  z-index: -2;
}
@-webkit-keyframes borderAnim {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes borderAnim {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@keyframes borderAnim {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes bgPos {
  0% {
    background-position: 610px 0px, 0px 95px;
  }
  100% {
    background-position: 0px 0px, 600px 95px;
  }
}
@-moz-keyframes bgPos {
  0% {
    background-position: 610px 0px, 0px 95px;
  }
  100% {
    background-position: 0px 0px, 600px 95px;
  }
}
@keyframes bgPos {
  0% {
    background-position: 610px 0px, 0px 95px;
  }
  100% {
    background-position: 0px 0px, 600px 95px;
  }
}
@-webkit-keyframes gearAnim {
  0% {
    -webkit-transform: rotate(376deg);
  }
  100% {
    -webkit-transform: rotate(16deg);
  }
}
@-moz-keyframes gearrAnim {
  0% {
    -moz-transform: rotate(376deg);
  }
  100% {
    -moz-transform: rotate(16deg);
  }
}
@keyframes gearAnim {
  0% {
    transform: rotate(376deg);
  }
  100% {
    transform: rotate(16deg);
  }
}

<div class="chain">
  <div class="gear-small"></div>
  <div class="before"></div>
  <div class="gear"></div>
  <div class="after"></div>
  <div class="gear"></div>
</div>

Last but not least, I would still recommend using the SVG approach for this because beyond a certain point such animations with CSS would become very messy :)

Answer 4

这种方法怎么样？我正在为齿轮和传送带使用 SVG。齿轮按照您的示例旋转，但我正在使用 stroke-dasharray 并设置动画 stroke-dash-offset 以使传送带移动。

为了获得正确的传送带长度和破折号计时需要一些小动作，如果您更改齿轮尺寸或传送带长度，则需要再次调整。

#one{
  -webkit-animation: rotateClockwiseAnimation 4s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 4s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 4s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 4s linear infinite; /* IE 10+, Fx 29+ */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 4s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 4s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 4s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 4s linear infinite; /* IE 10+, Fx 29+ */

 position:absolute;
    top:30px;
    left:42px;
    width:80px;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}


/******************************************************************************/

#chain
{
  -webkit-animation: conveyor 0.5s linear infinite; /* Safari 4+ */
  -moz-animation:    conveyor 0.5s linear infinite; /* Fx 5+ */
  -o-animation:      conveyor 0.5s linear infinite; /* Opera 12+ */
  animation:         conveyor 0.5s linear infinite; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@-moz-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@-o-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@keyframes conveyor {  
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}

<svg width="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 100">
    <defs>
        <circle id="c" cx="0" cy="0" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M0,-50 v15 M0,50 v-15 M-50,0 h15 M50,0 h-15"/>

        <g id="gear">
          <use xlink:href="#c"/>
          <use xlink:href="#d"/>
          <use xlink:href="#d" transform="rotate(45)"/>
        </g>
    </defs>
  
  <rect id="chain2"
          x="43" y="23" width="598" height="74" rx="37"
          stroke="gold" stroke-width="2" fill="none"/>

    <g transform="translate(27,27) scale(0.5)">
      <g id="one">
        <use xlink:href="#gear"/>
      </g>
    </g>

    <g transform="translate(80,60) scale(0.8)">
      <g id="two">
        <use xlink:href="#gear"/>
      </g>
    </g>
  
  <rect id="chain"
          x="43" y="23" width="598" height="74" rx="37"
          stroke="gold" stroke-width="5" fill="none"
          stroke-dasharray="14 15.06"/>
</svg>

Answer 5

注意：我在box-shadow中重新制作了整个动画，因为使用虚线边框在所有浏览器上的输出不一致。

工作

.. 跨浏览器工作。
FF 5+、GC 4+、IE9+、Safari 4+、Opera 12.1+

您可以使用 box-shadow 试试这个：

• 要制作齿轮齿，请使用具有负展开半径的盒子阴影。例如，我的齿轮尺寸是 50px，所以为了用 d=8px 绕过 box-shadow，我使用 -46px 作为展开半径。

• 我用坐标geo定位牙齿，为了简化只用了8颗牙齿

• 现在对于直线输送机，我们需要知道齿与齿之间的距离。我们通过以下方式得到：

• 2*pi*(gear radius) / no. of teeth = (pi * r) / 4
  我的 = (55 * 3.1415) / 4 = 43（大约）
  我将半径设为 55，因为齿的半径为 4px，距离齿轮圆周 1px。

• 为了对齐顶部和底部直线传送带，它们需要平移距离的任意倍数。对于我的装备，我将它们翻译成 43px。

脚手架

FIDDLE

body {
    background: rgba(25,80,175, 0.4);
}
.rect {
    height: 116px;
    width: 401px;
    border-radius: 58px;
    position: relative;
    overflow: hidden;
}

.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 46px; /*50-half width*/
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 43px 0 0 0 white, 86px 0 0 0 white, 129px 0 0 0 white, 172px 0 0 0 white, 215px 0 0 0 white, 258px 0 0 0 white, 301px 0 0 0 white;
    -webkit-animation: apple 0.3s linear infinite;
    -moz-animation: apple 0.3s linear infinite;
    animation: apple 0.3s linear infinite;
}
.rect:before {
    top: 0px;
}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes apple {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes apple {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes apple {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    content: '';
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: #222;
    box-shadow: 0 55px 0 -46px white, 55px 0 0 -46px white, 0 -55px 0 -46px white, -55px 0 0 -46px white,
        39px 39px 0 -46px white, -39px -39px 0 -46px white, 39px -39px 0 -46px white, -39px 39px 0 -46px white;
    -webkit-animation: mango 2.4s linear infinite;
    -moz-animation: mango 2.4s linear infinite;
    animation: mango 2.4s linear infinite;
}
.left {
    top: -108px;
    left: 0px;
}
.right {
    top: -208px;
    left: 301px;
}
@-webkit-keyframes mango {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes mango {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes mango {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>

---

最终版本

... 带齿轮。 链条目前是 虚线 虚线！

FIDDLE

body {
    background-color: white;
}
.rect {
    height: 120px;
    width: 401px;
    border-radius: 58px;
    position: relative;
}

.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 40px; /*50-half width*/
    height: 10px;
    width: 20px;
    background: transparent;
    box-shadow: 43px 0 0 0 gold, 86px 0 0 0 gold, 129px 0 0 0 gold, 172px 0 0 0 gold, 215px 0 0 0 gold, 258px 0 0 0 gold, 301px 0 0 0 gold, 344px 0 0 0 gold; /*keep adding 43 to x-axis*/
    -webkit-animation: apple 0.6s linear infinite;
    -moz-animation: apple 0.6s linear infinite;
    animation: apple 0.6s linear infinite;
    overflow: hidden;
}
.rect:before {
    top: 0px;
}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes apple {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes apple {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes apple {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    content: '';
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    -webkit-animation: mango 4.8s linear infinite;
    -moz-animation: mango 4.8s linear infinite;
    animation: mango 4.8s linear infinite;
}
.left {
    top: -110px;
    left: 0px;
}
.right {
    top: -210px;
    left: 344px;
}
.left:before, .left:after, .right:before, .right:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background-color: gold;
}
.left:before, .right:before {
    box-shadow: 50px 50px 0 0 gold, -50px 50px 0 0 gold, 0 100px 0 0 gold;
    top: -10px;
    left: 40px;
}
.left:after, .right:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 gold, 50px 50px 0 0 gold, -50px 50px 0 0 gold;
}
@-webkit-keyframes mango {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes mango {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes mango {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
.cover {
    height: 104px;
    width: 446px;
    border-radius: 50px;
    position: relative;
    background: rgba(255,255,255,1);
    top: -312px;
    left; -2px;
    
}
.gear, .gear2 {
    height: 100px;
    width: 100px;
    background: dimgray;
    border-radius: 50%;
    position: relative;
    -webkit-animation: gear 4.8s linear infinite;
    -moz-animation: gear 4.8s linear infinite;
    animation: gear 4.8s linear infinite;
}
.gear {
    top: -414px;
  
}
.gear2 {
    top: -514px;
    left: 345px;
}
.gear:before, .gear:after, .gear2:before, .gear2:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background-color: dimgray;
    
}
.gear:before, .gear2:before {
    box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
    top: -10px;
    left: 40px;
}
.gear:after, .gear2:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
@-webkit-keyframes gear {
    0% {-webkit-transform: rotate(22.5deg);}
    100% {-webkit-transform: rotate(-337.5deg);}
}
@-moz-keyframes gear {
    0% {-moz-transform: rotate(22.5deg);}
    100% {-moz-transform: rotate(-337.5deg);}
}
@keyframes gear {
    0% {transform: rotate(22.5deg);}
    100% {transform: rotate(-337.5deg);}
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="gear"></div>
<div class="gear2"></div>

最终版本（圆齿）

.rect {
    height: 120px;
    width: 401px;
    border-radius: 58px;
    position: relative;
}
.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 40px; /*50-half width*/
    height: 10px;
    width: 20px;
    box-shadow: 43px 0 0 0 gold, 86px 0 0 0 gold, 129px 0 0 0 gold, 172px 0 0 0 gold, 215px 0 0 0 gold, 258px 0 0 0 gold, 301px 0 0 0 gold, 344px 0 0 0 gold; /*keep adding 43 to x-axis*/
    -webkit-animation: translate 0.6s linear infinite;
    -moz-animation: translate 0.6s linear infinite;
    animation: translate 0.6s linear infinite;
    overflow: hidden;
}
.rect:before {top: 0px;}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes translate {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes translate {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes translate {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    -webkit-animation: rotate 4.8s linear infinite;
    -moz-animation: rotate 4.8s linear infinite;
    animation: rotate 4.8s linear infinite;
}
.left {
    top: -110px; left: 0px;
}
.right {
    top: -210px; left: 344px;
}
.left:before, .left:after, .right:before, .right:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background: gold;
}
.left:before, .right:before {
    box-shadow: 50px 50px 0 0 gold, -50px 50px 0 0 gold, 0 100px 0 0 gold;
    top: -10px;
    left: 40px;
}
.left:after, .right:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 gold, 50px 50px 0 0 gold, -50px 50px 0 0 gold;
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes rotate {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
.cover {
    height: 104px;
    width: 446px;
    border-radius: 50px;
    position: relative;
    background: rgba(255,255,255,1);
    top: -312px;
    left; -2px;
}
.gear, .gear2, .gear3 {
    height: 100px;
    width: 100px;
    background: transparent;
    box-shadow: inset 0 0 0px 35px dimgray, inset 0 0 0px 40px #444;
    border-radius: 50%;
    position: relative;
    -webkit-animation: rotate 4.8s linear infinite;
    -moz-animation: rotate 4.8s linear infinite;
    animation: rotate 4.8s linear infinite;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.gear {top: -414px;}
.gear2 {top: -514px; left: 345px;}
.gear:before, .gear:after, .gear2:before, .gear2:after,  .gear3:before, .gear3:after {
    height: 20px;
    width: 20px;
    content: '';
    border-radius: 20%;
    position: absolute;
    background: dimgray;
}
.gear:before, .gear2:before, .gear3:before {
    box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
    top: -10px; left: 40px;
}
.gear:after, .gear2:after, .gear3:after {
    transform: rotate(45deg);
    top: 5px; left: 76px;
    box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
.gear3 {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
    top: -504px;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="gear"></div>
<div class="gear2"></div>
<div class="gear3"></div>

FIDDLE - ROUNDED TEETH

---

注意：要提高动画速度，只需按比例减少每个元素的动画持续时间。

Fiddle (fast)

Answer 6

使用Canvas

形状（齿轮和链条）和行进的蚂蚁动画效果（虚线边框）也可以通过使用 Canvas 绘图来实现。 Canvas 的浏览器支持是 quite good.

虽然 Canvas 有基于光栅的缺点（相对于基于形状的 SVG），但只要 canvas 没有缩放太多就不是大问题. Canvas 预计在处理大量对象和实时动画时会更好。 Here 是一篇来自 MSDN 的关于何时使用 Canvas 或 SVG 的有趣文章。

---

形状的构造

以下是本动画涉及的关键parts/shapes：

• 连锁店
• 左齿轮
• 右齿轮
• 顶齿轮

Chain：通过绘制两条水平线（使用 lineTo 命令）创建链，两条水平线的两端由半圆（使用 arc 命令）。虚线边框效果是通过对笔画使用 setLineDash 方法来实现的。 setLineDash 方法有两个参数，第一个代表破折号的长度，第二个代表破折号之间的距离。

下面的代码片段显示了创建链所需的最少代码：

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var chain = {
    offset: 0,
    paint: function() {
      ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(533, 50);
      ctx.arc(533, 100, 50, (Math.PI * 1.5), (Math.PI * 0.5), false);
      ctx.lineTo(75, 150);
      ctx.arc(75, 100, 50, (Math.PI * 0.5), (Math.PI * 1.5), false);
      ctx.lineWidth = 5;
      ctx.fillStyle = 'transparent';
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = this.offset;
      ctx.fill();
      ctx.stroke();
    }
  };

  chain.paint();
}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

Cogs：所有三个齿轮（左、右和上）都是使用相同的命令实现的，唯一的区别是它们在屏幕上的定位（以及顶部齿轮的半径） ).

齿轮的辐条或轮齿是使用 arc 命令创建的（与链条的半圆相同），并使用相同的半径。它们的 lineDashoffset 被调整为正好占据链条虚线之间剩余的 space。

齿轮的主体由两个圆组成，外圆的半径大于内圆。 evenodd 填充参数用于仅在外圆上设置背景颜色（本例中为 tan），而使内圆保持透明。

下面的代码片段显示了创建齿轮所需的最少代码：

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var cog = {
    paint: function(x, y, r, offset) {
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = offset;
      ctx.strokeStyle = 'tan';
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x, y, (r - 2), 0, Math.PI * 2, true);
      ctx.arc(x, y, (r / 2.5), 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = 'tan';
      ctx.fill('evenodd');
    }
  };

  function paint() {
    var cog_radius = 50;
    var cog_t_x = 30,
      cog_t_y = 40,
      cog_t_offset = 20.5,
      cog_l_x = 75,
      cog_l_y = 100,
      cog_l_offset = 24.25,
      cog_r_x = 533,
      cog_r_offset = 11.25;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    cog.paint(cog_t_x, cog_t_y, (cog_radius / 2), cog_t_offset);
    ctx.restore();
    ctx.save();
    cog.paint(cog_l_x, cog_l_y, cog_radius, cog_l_offset);
    ctx.restore();
    ctx.save();
    cog.paint(cog_r_x, cog_l_y, cog_radius, cog_r_offset);
    ctx.restore();
  }
  paint();

}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

---

动画

动画是通过移动动画每一帧中的笔画lineDashOffset来实现的。动画本身是使用 window.requestAnimationFrame 方法触发的，该方法定期调用 paint 函数（作为参数传递）。回调速率一般为每秒 60 次（引用 MDN）。在 canvas 的每次重绘期间移动偏移量使其呈现动画效果。

可以通过调用 cancelAnimationFrame 方法随时停止动画。这可以基于一些用户交互（如点击、悬停等）或基于超时来完成。

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var anim, onState = false,
    counter = 0;
  var chain = {
    offset: 0,
    paint: function() {
      ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(533, 50);
      ctx.arc(533, 100, 50, (Math.PI * 1.5), (Math.PI * 0.5), false);
      ctx.lineTo(75, 150);
      ctx.arc(75, 100, 50, (Math.PI * 0.5), (Math.PI * 1.5), false);
      ctx.lineWidth = 5;
      ctx.fillStyle = 'transparent';
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = this.offset;
      ctx.fill();
      ctx.stroke();
    }
  };

  function paint(type) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    chain.offset += (6.54 / 10);
    ctx.save();
    chain.paint();
    ctx.restore();
    if (type) {
      anim = window.requestAnimationFrame(function() {
        paint(type);
      })
    }
  }
  paint(true);
}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

---

完整图片

将所有部分放在一起，下面的片段提供了链条和齿轮的完整图片以及动画：

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var anim, onState = false,
    counter = 0;
  var cog_radius = 50;
  var cog_t_x = 30,
    cog_t_y = 40,
    cog_t_offset = 20.5,
    cog_l_x = 75,
    cog_l_y = 100,
    cog_l_offset = 24.25,
    cog_r_x = 533,
    cog_r_offset = 11.25;
  var chain = {
    offset: 0,
    paint: function() {
      ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(533, 50);
      ctx.arc(533, 100, 50, (Math.PI * 1.5), (Math.PI * 0.5), false);
      ctx.lineTo(75, 150);
      ctx.arc(75, 100, 50, (Math.PI * 0.5), (Math.PI * 1.5), false);
      ctx.lineWidth = 5;
      ctx.fillStyle = 'transparent';
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = this.offset;
      ctx.fill();
      ctx.stroke();
    }
  };
  var cog = {
    paint: function(x, y, r, offset) {
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = offset;
      ctx.strokeStyle = 'tan';
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x, y, (r - 2), 0, Math.PI * 2, true);
      ctx.arc(x, y, (r / 2.5), 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = 'tan';
      ctx.fill('evenodd');
    }
  };

  function paint(type) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    chain.offset += (6.54 / 10);
    cog_l_offset -= (6.54 / 10);
    cog_r_offset -= (6.54 / 10);
    cog_t_offset += (6.54 / 10);
    ctx.save();
    cog.paint(cog_t_x, cog_t_y, (cog_radius / 2), cog_t_offset);
    ctx.restore();
    ctx.save();
    chain.paint();
    ctx.restore();
    ctx.save();
    cog.paint(cog_l_x, cog_l_y, cog_radius, cog_l_offset);
    ctx.restore();
    ctx.save();
    cog.paint(cog_r_x, cog_l_y, cog_radius, cog_r_offset);
    ctx.restore();
    if (type) {
      anim = window.requestAnimationFrame(function() {
        paint(type);
      })
    }
  }
  paint(true);
}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

---

用户互动

如前所述，还可以使用事件侦听器 (addEventListener) 添加用户交互。如果需要通过用户对 canvas 的特定形状或部分的操作来触发操作，则可以使用 pointInPath 方法来验证该点是否在 [=133= 的所需部分内].

Here 是 CodePen 演示的 link，其中还添加了这些用户交互（以及其他一些额外内容）。

^{注意：关于如何添加用户交互等的解释超出了这个特定答案的范围。但是，如果您需要任何帮助，可以在 this chat room.}

中找到我