使用关键帧将鼠标悬停在其他元素上时，使SVG元素具有动画效果

我在使用关键帧为SVG元素设置动画时遇到问题。当鼠标悬停在一个单独的链接上时，我想以不同的速率对SVG的各个部分进行动画处理。如果我移除#enter:hover，它会连续正确地为内核设置动画，我只希望它在我悬停在enter链接上时设置动画。

有人能指引我朝正确的方向走吗？

这是一个相当长的SVG文件，所以我没有包括它的部分（我没有设置动画的部分）。

CSS

svg{
  width:30%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  display:block;
  margin-top:none;
  padding-top: none;
  float:right;
}
#enter{
  color: #fff;
  text-decoration: none;
  font-size:300px;
  text-align: center;
  font-family: "monthoers", "Helvetica-nue", Verdana, serif;
  font-weight:110;
  margin-bottom: none;
  display:block;
  float:left;
  margin-top: 300px;
} 
.splash{
  text-align:center;
  margin-top: 100px;
  margin-bottom: none;
}
@keyframes pop1{
  0% {transform: translateY(0px);}
  10% {transform: translateY(-100px);
  }
  20% {transform: translateY(-200px);
  }
  30% {transform: translateY(-300px);
  }
  40% {transform: translateY(-400px);
  }
  50% {transform: translateY(-500px); 
    opacity:0.75;}
  70%{ transform: translateY(-300); }
  100% {opacity: 0.5;
    transform: translateY(100px);}
} 
@keyframes pop2 {
  0% {transform: translateY(0px);}
  10% {transform: translateY(-50px);
  }
  20% {transform: translateY(-100px);
  }
  30% {transform: translateY(-125px);
  }
  40% {transform: translateY(-150px);
  }
  50% {transform: translateY(-200px); 
    opacity:0.75;}
  70%{ transform: translateY(-100); }
  100% {opacity: 0.5;
    transform: translateY(100px);}  
}
@keyframes pop3 {
  0% {transform: translateY(0px);}
  10% {transform: translateY(-75px);
  }
  20% {transform: translateY(-150px);
  }
  30% {transform: translateY(-225x);
  }
  40% {transform: translateY(-300px);
  }
  50% {transform: translateY(-200px); 
    opacity:0.75;}
  70%{ transform: translateY(-100); }
  100% {opacity: 0.5;
    transform: translateY(100px);}  
}

#enter:hover  .kernel5 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop1 1s infinite ease;
}
#enter:hover .kernel3 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop2 1s infinite ease;
}
#enter:hover .kernel4 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop3 1s infinite ease;
}
#enter:hover .kernel2 {
  transition:transform 4s ;
  transform-origin: center center;
  animation: pop2 1s 1s infinite ease;
}

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset='utf-8' />
    <link rel='stylesheet' href='normalize.css'/>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1 class="splash">
      <a id="enter" href="home.html"> Kernel </a>
    </h1>
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <div class="svg">
      <svg
           xmlns:dc="http://purl.org/dc/elements/1.1/"
           xmlns:cc="http://creativecommons.org/ns#"
           xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:svg="http://www.w3.org/2000/svg"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
           xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
           width="210mm"
           height="297mm"
           viewBox="0 0 744.09448819 1052.3622047"
           id="svg2"
           version="1.1"
           inkscape:version="0.91 r13725"
           sodipodi:docname="kernels.svg">
        <defs
              id="defs4" />
        <sodipodi:namedview
                            id="base"
                            pagecolor="#ffffff"
                            bordercolor="#666666"
                            borderopacity="1.0"
                            inkscape:pageopacity="0.0"
                            inkscape:pageshadow="2"
                            inkscape:zoom="0.4384062"
                            inkscape:cx="13.604325"
                            inkscape:cy="505.21112"
                            inkscape:document-units="px"
                            inkscape:current-layer="layer9"
                            showgrid="false"
                            inkscape:window-width="1276"
                            inkscape:window-height="756"
                            inkscape:window-x="7"
                            inkscape:window-y="0"
                            inkscape:window-maximized="0" />
        <metadata
                  id="metadata7">
          <rdf:RDF>
            <cc:Work
                     rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type
                       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title />
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <g
           inkscape:groupmode="layer"
           id="layer8"
           inkscape:label="base 1"
           style="display:inline">
          <g class="kernel5"
             inkscape:groupmode="layer"
             id="layer9"
             inkscape:label="kernel5"
             style="display:inline;opacity:1">
            <path id="kernel5" 
                  ..../>
            <path id="kernel5" 
                  ..../>
            <path id="kernel5" 
                  ..../>
          </g>
          <g class="kernel3"
             inkscape:groupmode="layer"
             id="layer6"
             inkscape:label="kernel3"
             style="display:inline">
            <path id="kernel3"
                  ..../> 
            <path id="kernel3"
                  ..../> 
            <path id="kernel3"
                  ..../>
          </g>
          <g class="kernel4"
             inkscape:groupmode="layer"
             id="layer7"
             inkscape:label="kernel4"
             style="display:inline">
            <path id="kernel4"
                  ..../> 
            <path id="kernel4"
                  ..../> 
            <path id="kernel4"
                  ..../> 
            <g class="kernel2"
               inkscape:groupmode="layer"
               id="layer5"
               inkscape:label="kernel2"
               style="display:inline">
              <path id="kernel2"
                    ...../> 
              <path id="kernel2"
                    ...../> 
              <path id="kernel2"
                    ...../> 
            </g>
          </g>
        </g>
      </svg>
    </div>
  </body>
</html>

原因

问题在于标记结构（HTML）和用于将动画应用于元素的选择器。您正在使用的选择器（例如#enter:hover .kernel2）指示UA执行以下操作：

悬停具有id='enter'的元素时，选择作为其子体且具有class='kernel2的元素。后代不过是孩子和孙子的元素

您的HTML:（缩减为仅相关部分）

<h1 class="splash">
  <a id="enter" href="home.html"> Kernel </a>
</h1>
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<div class="svg">
  <svg viewBox='0 0 100 100'>
    <g class="kernel2"> <!-- this is not a descendant of the <a id="enter" -->
      <path id="kernel2" d='M0,0 50,100 100,0' />
    </g>
  </svg>
</div>

但根据标记，具有class='kernel2'的元素（位于svg内）不是具有id='enter'的元素的子级或子级，因此UA什么也不做。

解决方案

为了在使用id='enter'悬停在元素上时应用动画，您应该按照下面给出的方式更改标记。在这里，svg添加在<a>和</a>标记中，这使它成为具有id='enter'的元素的后代，因此将应用动画。

<h1 class="splash">
  <a id="enter" href="home.html"> Kernel 
    <svg viewBox='0 0 100 100'>
      <g class="kernel2">
        <path id="kernel2" d='M0,0 50,100 100,0' />
      </g>
    </svg>
  </a>
</h1>

下面是一个带有示例SVG和动画的演示，供您参考。

svg {
  width: 30px;
  float: right;
}
#enter {
  display: block;
  float: left;
}
@keyframes pop2 {
  0% {
    transform: translateY(0px);
  }
  10% {
    transform: translateY(-50px);
  }
  20% {
    transform: translateY(-100px);
  }
  30% {
    transform: translateY(-125px);
  }
  40% {
    transform: translateY(-150px);
  }
  50% {
    transform: translateY(-200px);
    opacity: 0.75;
  }
  70% {
    transform: translateY(-100);
  }
  100% {
    opacity: 0.5;
    transform: translateY(100px);
  }
}
#enter:hover .kernel2 {
  transition: transform 4s;
  transform-origin: center center;
  animation: pop2 1s 1s infinite ease;
}

<h1 class="splash">
  <a id="enter" href="home.html"> Kernel 
    <svg viewBox='0 0 100 100'>
      <g class="kernel2">
        <path id="kernel2" d='M0,0 50,100 100,0' />
      </g>
    </svg>
  </a>
</h1>

原因

解决方案

相关内容

最新更新

热门标签：