我正在为客户建立一个自定义网站。 我有一个自定义svg，里面有20条折线！ 我想要实现的是使用自定义JavaScript每隔几秒随机添加和删除一个类！
我已经制作了CSS并且添加了这个课程＆＃39; anim＆＃39;其中一个，以便我可以看到我的CSS工作。这是我到目前为止从CSS开始的......
.honeycomb {
position:absolute;
top:0;
left:0;
overflow:hidden;
width:28%;
height:auto;
z-index:50;
float:left
}
.honeycomb img {display:none}
.honeycomb svg {width:100%;height:auto;float:left;margin:auto}
.honeycomb .group {opacity:.1}
.honeycomb--op07 .group {opacity:.7}
.honeycomb .strokes polyline {
fill-opacity:0;
stroke:#26BFD0;
stroke-width:0;
opacity:1;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
.honeycomb .strokes polyline.anim {
stroke-width:1;
-webkit-animation:draw 4s linear;
-o-animation:draw 4s linear;
animation:draw 4s linear;
stroke-dasharray:500;
stroke-dashoffset:500;
-webkit-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
@-webkit-keyframes draw {
0%{
stroke-dashoffset:-250
}
90% {
stroke-dashoffset:250
}
100% {
stroke-dashoffset:250;
stroke:transparent
}
}
@-o-keyframes draw {
0%{
stroke-dashoffset:-250
}
90% {
stroke-dashoffset:250
}
100% {
stroke-dashoffset:250;
stroke:transparent
}
}
@keyframes draw {
0%{
stroke-dashoffset:-250
}
90% {
stroke-dashoffset:250
}
100% {
stroke-dashoffset:250;
stroke:transparent
}
}
.honeycomb--color .strokes polyline {stroke:#26BFD0}
<div id="honeycomb" class="honeycomb honeycomb--color">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="479.779px" height="728.499px" viewBox="78.708 208.991 479.779 728.499"
enable-background="new 78.708 208.991 479.779 728.499" xml:space="preserve">
<g class="strokes">
<polyline class="anim" fill="none" stroke="#26BFD0" stroke-width="0.8079" points="353.708,634.052 374.14,669.439 353.708,704.827
374.14,740.217 415.001,740.217 435.434,775.604 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="292.414,457.11 251.551,457.11 231.12,492.5 190.257,492.5
169.827,527.889 190.257,563.278 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="250.066,597.181 231.12,634.055 251.551,669.44
231.12,704.83 190.257,704.83 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="231.125,350.941 190.262,350.941 169.831,386.331
190.262,421.721 169.831,457.107 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="374.14,457.113 353.708,492.496 374.14,527.886
353.708,563.275 312.845,563.277 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="263.06,335.479 283.489,370.867 324.349,370.873
344.781,406.263 324.349,441.65 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="415.001,669.439 435.434,704.827 476.294,704.827
496.727,740.217 476.294,775.604 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.192,760.144 263.055,760.144 285.072,793.944
324.349,795.531 344.781,830.918 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="292.418,244.777 312.845,280.17 353.708,280.17
374.14,315.561 353.708,350.948 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="201.762,583.204 160.899,583.204 140.468,618.594
160.899,653.979 140.468,689.366 160.899,724.758 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="283.486,653.977 263.055,689.366 283.486,724.756
324.349,724.754 344.781,760.143 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="374.14,527.886 415.001,527.886 435.434,563.275
415.001,598.663 435.434,634.052 476.294,634.052 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="353.708,775.604 374.14,810.992 415.001,810.992
435.434,846.382 415.001,881.77 435.434,917.158 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.192,547.816 263.055,547.814 283.486,583.201
324.349,583.201 344.781,618.591 324.349,653.977 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="251.556,315.552 292.418,315.552 312.845,350.948
292.418,386.328 251.556,386.328 231.125,421.721 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="99.605,406.265 79.174,441.652 99.61,477.034
140.473,477.034 160.899,512.428 140.468,547.816 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.197,406.257 201.762,441.65 222.192,477.039
263.055,477.039 283.486,512.425 324.349,512.428 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="435.434,492.496 476.294,492.496 496.727,527.886
476.294,563.275 496.727,598.663 537.588,598.665 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="558.021,775.604 537.588,810.992 496.727,810.992
476.294,846.382 496.727,881.77 476.294,917.158 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="446.936,583.201 406.073,583.201 385.643,618.591
406.073,653.977 385.643,689.366 406.073,724.754 "/>
</g>
</svg>
</div>
那么我可以使用任何教程来实现这一目标吗？
非常感谢 菲利普
答案 0 :(得分：1)
假设你已经在你正在构建的网站上使用jQuery，你可以这样做:(动画加速）
function randomPolyline() {
var countPolylines = $("#honeycomb svg polyline").length,
randomPolyline = Math.floor(Math.random() * countPolylines) + 1;
$("#honeycomb svg polyline").removeClass("anim");
$("#honeycomb svg polyline:nth-child(" + randomPolyline + ")").addClass("anim");
}
$(function() {
setInterval(randomPolyline, 1000);
});.honeycomb {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 28%;
height: auto;
z-index: 50;
float: left
}
.honeycomb img {
display: none
}
.honeycomb svg {
width: 100%;
height: auto;
float: left;
margin: auto
}
.honeycomb .group {
opacity: .1
}
.honeycomb--op07 .group {
opacity: .7
}
.honeycomb .strokes polyline {
fill-opacity: 0;
stroke: #26BFD0;
stroke-width: 0;
opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.honeycomb .strokes polyline.anim {
stroke-width: 1;
-webkit-animation: draw 1s linear;
-o-animation: draw 1s linear;
animation: draw 1s linear;
stroke-dasharray: 500;
stroke-dashoffset: 500;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@-webkit-keyframes draw {
0% {
stroke-dashoffset: -250
}
90% {
stroke-dashoffset: 250
}
100% {
stroke-dashoffset: 250;
stroke: transparent
}
}
@-o-keyframes draw {
0% {
stroke-dashoffset: -250
}
90% {
stroke-dashoffset: 250
}
100% {
stroke-dashoffset: 250;
stroke: transparent
}
}
@keyframes draw {
0% {
stroke-dashoffset: -250
}
90% {
stroke-dashoffset: 250
}
100% {
stroke-dashoffset: 250;
stroke: transparent
}
}
.honeycomb--color .strokes polyline {
stroke: #26BFD0
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="honeycomb" class="honeycomb honeycomb--color">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="479.779px" height="728.499px" viewBox="78.708 208.991 479.779 728.499" enable-background="new 78.708 208.991 479.779 728.499"
xml:space="preserve">
<g class="strokes">
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="353.708,634.052 374.14,669.439 353.708,704.827
374.14,740.217 415.001,740.217 435.434,775.604 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="292.414,457.11 251.551,457.11 231.12,492.5 190.257,492.5
169.827,527.889 190.257,563.278 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="250.066,597.181 231.12,634.055 251.551,669.44
231.12,704.83 190.257,704.83 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="231.125,350.941 190.262,350.941 169.831,386.331
190.262,421.721 169.831,457.107 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="374.14,457.113 353.708,492.496 374.14,527.886
353.708,563.275 312.845,563.277 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="263.06,335.479 283.489,370.867 324.349,370.873
344.781,406.263 324.349,441.65 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="415.001,669.439 435.434,704.827 476.294,704.827
496.727,740.217 476.294,775.604 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.192,760.144 263.055,760.144 285.072,793.944
324.349,795.531 344.781,830.918 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="292.418,244.777 312.845,280.17 353.708,280.17
374.14,315.561 353.708,350.948 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="201.762,583.204 160.899,583.204 140.468,618.594
160.899,653.979 140.468,689.366 160.899,724.758 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="283.486,653.977 263.055,689.366 283.486,724.756
324.349,724.754 344.781,760.143 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="374.14,527.886 415.001,527.886 435.434,563.275
415.001,598.663 435.434,634.052 476.294,634.052 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="353.708,775.604 374.14,810.992 415.001,810.992
435.434,846.382 415.001,881.77 435.434,917.158 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.192,547.816 263.055,547.814 283.486,583.201
324.349,583.201 344.781,618.591 324.349,653.977 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="251.556,315.552 292.418,315.552 312.845,350.948
292.418,386.328 251.556,386.328 231.125,421.721 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="99.605,406.265 79.174,441.652 99.61,477.034
140.473,477.034 160.899,512.428 140.468,547.816 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.197,406.257 201.762,441.65 222.192,477.039
263.055,477.039 283.486,512.425 324.349,512.428 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="435.434,492.496 476.294,492.496 496.727,527.886
476.294,563.275 496.727,598.663 537.588,598.665 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="558.021,775.604 537.588,810.992 496.727,810.992
476.294,846.382 496.727,881.77 476.294,917.158 "/>
<polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="446.936,583.201 406.073,583.201 385.643,618.591
406.073,653.977 385.643,689.366 406.073,724.754 "/>
</g>
</svg>
</div>
如果你想在不删除.anim类的情况下建立蜂窝图片，每次检查折线是否已经使用.hasClass("anim")进行了类，然后将其添加到另一个。< / p>