问题描述
我正在拼命地在我的链接上创建一个类似于这个 gif 的动画。
我正在使用以下 html(wordpress 上的 elementor):
<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-left">
<i aria-hidden="true" class="icon icon-arrow"></i>
</span>
<span class="elementor-button-text">Say Hello</span>
</span>
</a>
span elementor-button-icon 包含我的图标。
这是CSS:
a span.elementor-button-content-wrapper { position: relative;}
a span.elementor-button-content-wrapper:before {
content: "";
position: absolute;
width: 0;
height: 1px;
bottom: -5px;
left: 0;
background-color: #0D4BDE;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
a:hover span.elementor-button-content-wrapper:before {
visibility: visible;
width: 100%;
}
a span.elementor-button-icon {visibility:hidden;opacity:0;transition:all .2s ease}
a span.elementor-button-text {transition:all .2s ease;}
a:hover span.elementor-button-text {transform:translateX(15px);}
a:hover span.elementor-button-icon {opacity:1;visibility:visible;}
但这根本不是正确的结果。我在网上到处搜索,但没有找到任何东西。
我们中间的天才?
解决方法
我不了解 Elementor,但在 css
中,您可以按照以下示例执行某些操作,它应该可以帮助您开始实现目标。
a {
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: .5rem 0;
color: blue;
}
a::before {
content: '';
width: 0;
height: 1px;
background: blue;
position: absolute;
bottom: 0;
left: 0;
transition: width .2s ease;
}
.elementor-button-icon {
position: absolute;
transform: translateX(-14px);
opacity: 0;
transition: all .2s ease;
}
.elementor-button-text {
display: inline-block;
transition: padding-left .2s ease;
}
a:hover .elementor-button-text {
padding-left: 24px;
}
a:hover::before {
width: 100%;
}
a:hover .elementor-button-icon {
transform: translateX(0);
opacity: 1;
}
<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-left">
→
</span>
<span class="elementor-button-text">Say Hello</span>
</span>
</a>
您可以调整以下内容。箭头 (overflow: hidden
) 和下划线分别从 0 宽度扩展到 24 像素和父宽度的 100%:
a {
position: relative;
text-decoration: none;
}
a::after {
content: "";
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: #0D4BDE;
transition: width 1s ease-in-out;
}
.elementor-button-icon {
display: inline-block;
width: 0;
overflow: hidden;
transition: width 1s;
}
.elementor-button-text {
transition: border 1s;
}
a:hover::after {
width: 100%;
}
a:hover .elementor-button-icon {
width: 24px;
}
<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
<span class="elementor-button-icon elementor-align-icon-left">→</span>
<span class="elementor-button-text">Say Hello</span>
</a>