剪切路径文本底部上的悬停动画“向下滑动”不起作用。你能帮助我吗？
Posted
技术标签:
【中文标题】剪切路径文本底部上的悬停动画“向下滑动”不起作用。你能帮助我吗？【英文标题】：Hover animation 'slidedown' on the clipped path text-bottom is not working. Can you help me? 【发布时间】：2020-12-19 16:39:54 【问题描述】：徽标底部的文本有一个剪辑路径，可能正因为如此，我无法触发悬停动画。我已经更改了元素的调用类并且没有效果。动画已经在样式上，它被称为“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-1fill:#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-2font-size:343px;font-family:Dense-Thin,Dense;font-weight:200;letter-spacing:0.112em;
.cls-2stroke-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-3fill:#3ee7ad; font-family:Dense;
.cls-3font-size:73px; letter-spacing:0.206em;
.cls-4stroke:#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" fill="transparent"/>
</svg>
´´´
【问题讨论】：
【参考方案1】：我已经更改了转换转换的值（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>【讨论】：
你是对的！我使用我在 XML 代码中给出的值作为参考，我应该使用默认值。现在我可以应用我的想法了。谢谢！以上是关于剪切路径文本底部上的悬停动画“向下滑动”不起作用。你能帮助我吗？的主要内容，如果未能解决你的问题，请参考以下文章
webview_flutter滑动存在卡顿问题的完美解决方法