html - 使用关键帧将鼠标悬停在不同元素上时让 SVG 元素动画化-6ren

html - 使用关键帧将鼠标悬停在不同元素上时让 SVG 元素动画化

转载作者：行者123 更新时间：2023-11-28 02:57:04

我在使用关键帧为 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>

关于html - 使用关键帧将鼠标悬停在不同元素上时让 SVG 元素动画化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36536430/

文章推荐： c++ - MFC 自定义 - 添加新的工具栏？

文章推荐： javascript - 从BHO中的静态方法调用网页上的javascript

文章推荐： c# - 在 C# 应用程序中播放视频

文章推荐： javascript - 是否可以制作一个离线工作的网络应用程序？

java - 关键帧 FFMPEG
是否有一个 FFMPEG 命令，如果我们传递一个视频文件，在每个场景更改时它都应该为它生成一个关键帧。我理解的关键帧是视频的一系列文件(图像或视频)文件，可用于在视频悬停时播放。请让我们知道我们是否可
CSS 关键帧 - 回到原点
我正在切换我通过带有 JQuery 的 toggleClass 触发的一系列动画/过渡。其中一个动画正在使用以下内容: .header { transition: all .3s ease-
带链接的 CSS 关键帧
我有一些图片可以在关键帧中很好地滚动 @-webkit-keyframes headImage /* Safari and Chrome */ { 0% {background:url(../imag
jQuery CSS 关键帧
尝试用 jQuery 制作一个简单的重复关键帧动画 $(document).ready(function() { $('body').mouseover(function() {
样式表中的 CSS3 关键帧
我在 richard bradshaw 找到了一个关于 css3 transitions 的很好的教程，可以在 http://css3.bradshawenterprises.com/cfimg/ 我
css - 关键帧 - 渐变背景不是动画
我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生变化，但不是动画。 #mydiv { background: radial-gradient(circle at 90%
javascript - 仅在添加类时触发 css 关键帧
如果单击按钮 2，您将看到动画运行。但是，当我使用另一个功能对按钮进行更改(选中复选框以显示。隐藏按钮)时，动画会再次运行，就像再次按下一样。如何防止每次单独的函数对按钮进行更改时触发动画？即在切换
c# - 如何将RGB图像编码成H264帧(关键帧+一些依赖帧)？
所以我创建了图像生成器(生成 RGB 的非常简单的一个)我希望能够将一定数量的图像转换为 H264 关键帧+相关帧(lats 说 100)所以在生成的每 100 帧上我需要将它们编码为 H264 .怎
html - CSS 关键帧 - 动画在内容已经静态出现后开始
我一直在尝试自学一些带有关键帧的 css 动画，我正在尝试创建一些东西，其中有一个小方 block 落下，然后从那个方 block 中，一个矩形从左边突出，然后显示一些大约 8 秒后发短信，然后 re
css - 分组 CSS3 关键帧
我意识到我不能简单地通过用逗号分隔@keyframes mymove、@-moz-keyframes mymove 等来完成下面相同的代码。。为了让它们工作，我需要如下分别声明它们。有什么方法可以将
css - 关键帧 CSS 动画覆盖悬停过渡
恐怕有类似的问题，但我没有找到具体的解决方案，所以我创建了一个 fiddle : http://jsfiddle.net/Garavani/yrnjaf69/2/ TEXT
html - 关键帧 div 上的图像映射
我有一个包含多个坐标的图像映射。但是，当我在上面放置一个关键帧 div (clouds) 时，这个不起作用，因为动画覆盖了 map 。最后一个 div 是一个动画，有一些云从图像上掠过。 html代码
用于重复闪烁效果的 CSS 关键帧(wifi)
所以我正在尝试为元素创建 Wifi 闪烁效果。首先圆圈应该是可见的，然后是上面的圆圈，依此类推。在所有符号都可见后，它应该等待 2 秒，然后重新开始。你可以在这里看到我的当前状态: http://js
javascript - 单击时运行 CSS 关键帧
我试图在单击按钮时显示一条消息。我想要“GO!”淡入/淡出表示游戏开始，但只有在单击开始按钮时才会出现。我现在正在尝试使用 jquery 和另一个来自老师的库的 javascript，它结合了鼠标点击
css - 关键帧 cssAnimation 百分比？
我正在尝试使用以下代码让对象在背景中从左向右浮动。不幸的是，当它离开屏幕时，尽管向类添加了 overflow-y: hidden 属性，但仍会出现垂直滚动条。我尝试了百分比(100% 与过渡)但它没有
css - 使用 CSS3 关键帧
我正在为将鼠标悬停在图形图像上时的弹跳效果创建关键帧。我的一切都正常工作，但是一旦动画完成..图标就会消失。我知道它与电子邮件中设置的 translateY 属性有关，并在类里面链接。在悬停时，我
javascript - 关键帧 CSS 动画
你好我正在尝试模拟翻转倒数计时器但是当我编写代码时我发现两者之间存在差异: @keyframes zindex { 0% { z-index: 2; } 5% { z-index: 4
css - 关键帧 css 中的更多内容
如果我有: @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 是否可以: @keyframes anim
javascript - 切换 CSS 关键帧
我有一个弹出窗口，它在单击按钮时打开，然后在您单击另一个按钮或弹出窗口之外时关闭。我希望弹出窗口在打开时淡入并在关闭时淡出。如何使用 javascript 在两个关键帧之间切换？我尝试通过使用 ja
jquery - 如何初始化 jquery 关键帧
我正在尝试使用 jquery Keyframes用于动态创建的关键帧动画。我的页面上有六个图标(可能更多)，它们都需要设置为以下范围内的随机 x 和 y 值的动画: x = 1-5y = 13-20

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使用关键帧将鼠标悬停在不同元素上时让 SVG 元素动画化

原因

解决方案