我正在制作一个css动画,它使用了‘齿轮和链条’,但无法创建一个‘平滑’的边界旋转序列。
你可以在这个fiddle中看到我是如何(目前)使用一个伪元素来生成一个“旋转”效果的。这是通过在虚线白色和虚线金色边框之间“切换”来实现的,让它看起来像是“边框在旋转”。
我有什么?
#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>
因此,在代码片段的下半部分,您可以看到我是如何通过使用关键帧来生成“旋转链效果”的。
我想要什么
我的总体愿望是生成如下内容:
想一想传送带的横截面,以及“末端的齿轮如何驱动传送带”。我正试着重现这一切。(即虚线边框的金色比特应该在齿轮的槽内,并被它“拉动”)
#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%的宽度(如果这是有意义的)。
最后,我想生成如下图所示的内容:
看到我想要的链条如何“旋转”了吗?
My Current Issues
发布于 2015-02-24 19:39:10
齿轮和链条动画:
我完全重构了代码(CSS和HTML),现在是:
方法是相同的,即为链路径设置齿轮和dash-offset
的旋转角度动画。我调整了两个动画之间的时间,让它看起来就像是齿轮在拉动链条。
浏览器支持:
作为IE doesn't support的svg动画元素,我还使用snap.svg库制作了这个版本的动画,该库也支持IE9或更高版本(在IE9中使用crossbrowsertesting进行了测试)。
支持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虚线路径,并使用关键帧动画为dash-offset属性设置动画效果。
这可以而且应该简化/调整,以供“真实世界”使用:
<svg>
标签中(这将使其更简单,并且两个齿轮+链都可以调整大小)链和齿轮之间的同步并不完美,需要调整链的速度/大小。
#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>
发布于 2015-02-24 20:58:15
这种方法怎么样?我对齿轮和传送带都使用了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>
发布于 2015-02-24 20:29:17
下面是关于如何使用CSS实现齿轮动画的另一种方法。这种方法已经在IE11、IE10、火狐、Chrome、Opera和Safari上进行了测试。
box-shadow
以生成内圆。齿是由绕轴旋转的子元素(法线+伪线)产生的。
.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>
奖励:这里是带有开/关开关的整个动画:)单击(拉动)链控制柄以打开或关闭动画。
.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>
原始答案:(由于虚线边框错误,在火狐上不起作用,而且在IE中虚线更近,让它看起来很难看)。
您可以通过组合使用以下各项来实现边界旋转动画:
border-radius: 50%
),两边都有虚线边框,以形成边框的弯曲部分。linear-gradient
模拟。这个元素的背景(除了顶部和底部的渐变)是纯色,这是一种缺点。这种纯色用于隐藏任一侧的一半圆形元素。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>
最后但并非最不重要的一点是,我仍然建议使用SVG方法,因为超过一定程度,这样的CSS动画将变得非常混乱:)
https://stackoverflow.com/questions/28693659
复制相似问题