【发布时间】：2018-10-21 17:38:09
【问题描述】：
每个圆圈出来的线条无限旋转（通过css关键帧不难实现） 我尝试使用 100 个 div 并每个旋转 10 度，但未能满足我的需求。所以我想到了 svg，我做了一些事情，但它没有按需要工作，线条没有全屏显示。上面的小提琴。
html,
body {
overflow: hidden;
}
.fw {
border-top: 1px red solid;
width: 2000px;
}
.wrapper {
overflow: hidden;
}
@-webkit-keyframes rotating
/* Safari and Chrome */
{
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.wrapper1 {
display: inline-block;
position: fixed;
-webkit-animation: rotating 10s linear infinite;
-moz-animation: rotating 10s linear infinite;
-ms-animation: rotating 10s linear infinite;
-o-animation: rotating 10s linear infinite;
animation: rotating 10s linear infinite;
}<div class="wrapper" style="position:absolute;top:20%;left:10%;width:100%;height:100%;">
<div class="wrapper1">
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1097 1097" style="enable-background:new 0 0 1097 1097;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:red;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<g>
<line class="st0" x1="551.5" y1="0" x2="551.5" y2="1097"/>
</g>
<g>
<line class="st0" x1="1097" y1="555.5" x2="0" y2="555.5"/>
</g>
<g>
<line class="st0" x1="935.6" y1="152.6" x2="179.7" y2="947.6"/>
</g>
<g>
<line class="st0" x1="947.2" y1="931" x2="152.2" y2="175.1"/>
</g>
<g>
<line class="st0" x1="755.6" y1="41.3" x2="351" y2="1060.9"/>
</g>
<g>
<line class="st0" x1="1057.8" y1="755.8" x2="38.1" y2="351.2"/>
</g>
<g>
<line class="st0" x1="1055.4" y1="323.4" x2="59.6" y2="783.6"/>
</g>
<g>
<line class="st0" x1="781" y1="1051.6" x2="320.8" y2="55.8"/>
</g>
<g>
<line class="st0" x1="456.7" y1="13.2" x2="646.2" y2="1093.7"/>
</g>
<g>
<line class="st0" x1="1090" y1="466.2" x2="9.5" y2="655.6"/>
</g>
<g>
<line class="st0" x1="861.4" y1="97.1" x2="254.2" y2="1010.8"/>
</g>
<g>
<line class="st0" x1="1007.3" y1="861.9" x2="93.6" y2="254.7"/>
</g>
<g>
<line class="st0" x1="664.9" y1="18.6" x2="442.5" y2="1092.8"/>
</g>
<g>
<line class="st0" x1="1085.9" y1="670.2" x2="11.7" y2="447.8"/>
</g>
<g>
<line class="st0" x1="1008.9" y1="244.7" x2="107.6" y2="870"/>
</g>
<g>
<line class="st0" x1="864.4" y1="1009.4" x2="239.1" y2="108"/>
</g>
</g>
</svg>
<div style="position:fixed;top:50%;left:50%;margin:0px auto;display:block;text-align:center; width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;">Support</div>
</div>
</div>如果您至少可以向我指出一些资源以实现我的需要，那就太好了。 提前致谢。
【问题讨论】：
-
您是否考虑过使用
canvas元素并采用面向对象 的方法？这样您就可以将canvas元素的大小调整到您需要的大小，并编写延伸到canvas本身所有边的draw 方法。
标签： javascript css svg css-animations