剪切路径文本底部的悬停动画“ slidedown”不起作用你能帮助我吗？

分类：编程问答

如何解决剪切路径文本底部的悬停动画“ slidedown”不起作用你能帮助我吗？

徽标底部的文本具有剪切路径，也许因此，我无法触发悬停动画。我已经更改了元素的调用类，但没有任何效果。动画已经在样式上，它称为“ slidedown”。但是，当将鼠标悬停在徽标上时，底部的文本会消失，并且不会启动动画。什么不对？谢谢。

<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,0); stroke: rgba(62,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}
    70%  {fill: rgba(62,1); }
    80%  {fill: rgba(62,1); stroke-width: 2; }
    100% {opacity: 1;fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}

@-webkit-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}
@-moz-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}
@-o-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,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,287px);}
}
@-o-keyframes slideup {
  0%   {transform: translate(0,287px);}
}
@keyframes slideup {
  0%   {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>
´´´

解决方法

我已经更改了转换转换的值（y值），因为您将文本丢得很远。

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

@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;
}
<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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot