文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在剪切路径text-bottom上悬停动画“slidedown”不起作用。你能帮帮我吗?

问在剪切路径text-bottom上悬停动画“slidedown”不起作用。你能帮帮我吗?
EN

Stack Overflow用户
提问于 2020-08-31 22:35:52
回答 1查看 23关注 0票数 2

logo底部的文字有一个剪辑路径，可能正因为如此，我无法触发悬停动画。我已经更改了元素的调用类，但没有任何效果。动画已经在样式上了，它被称为“slidedown”。但是当我将鼠标悬停在徽标上时，底部的文字就会消失，并且不会开始播放动画。什么是不正确的？谢谢。

代码语言：javascript
复制
<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88">
<defs>  
   <clipPath id="path-1">  
     <path class="bottom-path" d="M1421.75,395.66H8.58V322H1421.75 z" />  
   </clipPath>
   <clipPath id="path-2">  
     <path class="cls-x" d="M589,287.24H13V48H589Z"/>  
   </clipPath> 
 </defs>
<style>
@font-face {
  font-family: 'Dense Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Dense Regular'), url('Dense-Regular.woff') format('woff');
}
.cls-1{fill:#3ee7ad; font-family:Dense;font-size:343px; letter-spacing:0.112em;transform: translate(0,550px);
 -webkit-animation: slideup 2s forwards; /* Safari 4+ */
  -moz-animation:    slideup 2s forwards; /* Fx 5+ */
  -o-animation:      slideup 2s forwards; /* Opera 12+ */
  animation:         slideup 2s forwards; animation-delay: 2.3s;/* IE 10+, Fx 29+ */
  -webkit-animation-delay: 2.3s; /* Safari 4+ */
  -moz-animation-delay:    2.3s; /* Fx 5+ */
  -o-animation-delay:      2.3s; /* Opera 12+ */}
.cls-2{font-size:343px;font-family:Dense-Thin,Dense;font-weight:200;letter-spacing:0.112em;}
.cls-2{stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0); opacity: 0;
-webkit-animation: stroke 5.5s 1 forwards ease-in-out; /* Safari 4+ */
  -moz-animation:    stroke 5.5s 1 forwards ease-in-out; /* Fx 5+ */
  -o-animation:      stroke 5.5s 1 forwards ease-in-out; /* Opera 12+ */
  animation: stroke 5.5s 1 forwards ease-in-out;animation-delay: 2s;/* IE 10+, Fx 29+ */
  -webkit-animation-delay: 2s; /* Safari 4+ */
  -moz-animation-delay:    2s; /* Fx 5+ */
  -o-animation-delay:      2s; /* Opera 12+ */}

.cls-3{fill:#3ee7ad; font-family:Dense;}
.cls-3{font-size:73px; letter-spacing:0.206em;}
.cls-4{stroke:#3ee7ad;stroke-dasharray: 1390;
  stroke-dashoffset: 1390;stroke-width: 6px; stroke-linecap:butt;
  -webkit-animation: dash 8.5s linear forwards; /* Safari 4+ */
  -moz-animation:    dash 8.5s linear forwards; /* Fx 5+ */
  -o-animation:      dash 8.5s linear forwards; /* Opera 12+ */
  animation: dash 8.5s linear forwards;/* IE 10+, Fx 29+ */}

  .bottom-path {
    transform: scaleX(0);
  -webkit-animation: typing 4s steps(38) forwards; /* Safari 4+ */
  -moz-animation:    typing 4s steps(38) forwards; /* Fx 5+ */
  -o-animation:      typing 4s steps(38) forwards; /* Opera 12+ */
  animation: typing 4s steps(38) forwards; animation-delay: 0.5s; /* IE 10+, Fx 29+ */
  -webkit-animation-delay: 0.5s; /* Safari 4+ */
  -moz-animation-delay:    0.5s; /* Fx 5+ */
  -o-animation-delay:      0.5s; /* Opera 12+ */
}

@keyframes stroke {
    0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}
    70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }
    80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }
    100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}

@-webkit-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}
    70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }
    80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }
    100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}
@-moz-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}
    70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }
    80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }
    100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}
@-o-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}
    70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }
    80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }
    100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}

@-webkit-keyframes slideup {
  0%   {transform: translate(0,450px);}
  60%   {transform: translate(0,275px);}
   100% {transform: translate(0,287px);}
}
@-moz-keyframes slideup {
  0%   {transform: translate(0,450px);}
  60%   {transform: translate(0,275px);}
   100% {transform: translate(0,287px);}
}
@-o-keyframes slideup {
  0%   {transform: translate(0,450px);}
  60%   {transform: translate(0,275px);}
   100% {transform: translate(0,287px);}
}
@keyframes slideup {
  0%   {transform: translate(0,450px);}
  60%   {transform: translate(0,275px);}
   100% {transform: translate(0,287px);}
}


/* The typing effect */

@-webkit-keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}
@-moz-keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}
@-o-keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}
@keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}

@keyframes fade-in {
  from { opacity: 0;}
  to {opacity: 1;}
}

@-webkit-keyframes dash {
0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@-moz-keyframes dash {
0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@-o-keyframes dash {
  0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
  25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
  90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
  100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@keyframes dash {
  0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
  25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
  90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
  100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@keyframes dashcont {
  0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
  50% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
  100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@keyframes slidedown {
  0%   {transform: translate(13.69px,320px);}
   100% {transform: translate(13.69px,385.74px);}
}

#palmdesign-logo:hover .cls-x {
    animation: typing 1.5s  forwards; animation-delay: 0.5s; /* IE 10+, Fx 29+ */}

#palmdesign-logo:hover .cls-2 {
    animation: stroke 7s infinite alternate ease-in-out;    
}


#palmdesign-logo:hover #text-bottom text.cls-3{
    animation: slidedown 2s;
}


</style>
<g id="text-palm" clip-path="url(#path-2)">
<text class="cls-1" transform="translate(0 287.26)">PALM</text></g>
<text class="cls-2" transform="translate(625 287.26)">DESIGN</text>
<g id="text-bottom" clip-path="url(#path-1)">
<text class="cls-3" x="13.69" y="385.74">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA
</text>
</g>
<line id="linha" class="cls-4" x1="18" y1="314" x2="1408" y2="314"></line>
<rect id="rectangulo" x="18" y="38" width="1390" height="255" fill="transparent"/>
</svg>
´´´
css
animation
svg
hover
clip-path
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-31 23:33:38

我已经更改了transform translate的值( y值)，因为您所拥有的是将文本抛到很远的地方。

此外，我还简化了代码，删除了与您的问题无关的部分。

​

代码语言：javascript
复制
@font-face {
  font-family: "Dense Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Dense Regular"), url("Dense-Regular.woff") format("woff");
}

.bottom-path {
  transform: scaleX(0);
  animation: typing 4s steps(38) forwards;
  animation-delay: 0.5s;
}

@keyframes typing {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.cls-3 {
  fill: #3ee7ad;
  font-family: Dense;
}
.cls-3 {
  font-size: 73px;
  letter-spacing: 0.206em;
  transform: translate(13.69px, 0px);
}

@keyframes slidedown {
  0% {
    transform: translate(13.69px, 0px);
  }
  100% {
    transform: translate(13.69px, 74px);
  }
}

#palmdesign-logo:hover #text-bottom text.cls-3 {
  animation: slidedown 2s;
}

svg {
  border: solid;
}
代码语言：javascript
复制
<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88">
<defs>  
   <clipPath id="path-1">  
     <path class="bottom-path" d="M1421.75,395.66H8.58V322H1421.75 z" />  
   </clipPath>
 </defs>

<g id="text-bottom" clip-path="url(#path-1)">
<text class="cls-3" x="13.69" y="385.74">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA
</text>
</g>

</svg>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63672860

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档