在svg中的随机元素中添加和删除类

问题描述 投票：1回答：1

我正在为客户建立一个自定义网站。我有一个自定义svg，里面有20条折线！我想要实现的是使用自定义JavaScript每隔几秒随机添加和删除一个类！

我已经制作了CSS并将其中的“anim”类添加到其中一个中，以便我可以看到我的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>

那么我可以使用任何教程来实现这一点吗？

非常感谢菲利普

javascript html css animation svg
1个回答
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")的类，然后将其添加到另一个。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.