我想要一个如
https://www.plantflags.com/en/的滚动按钮
这个网站按钮翻转效果.例如：如果你翻转按钮,然后在文本应该淡出和箭头应该来自左侧和创造.推出后,箭头右侧淡出,文字再次淡出.
示例：如果你去那个网站并翻转那个按钮,你会明白的.
我研究过他们的代码,CSS可以理解,但是有一个我不明白的JS问题.
你能弄清楚我能如何使这种类型的翻转效果.
有HTML代码像
<a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button>Tell me more</a>
解决方法
这是我的第一个通行证我试图将额外的标记保持在最低限度;唯一的补充是包装文本的跨度.箭头是通过
pseudo elements创建的.它是纯粹的装饰性的,如果在其他元素中构造,在我看来不会是语义.
<a href="#" class="promo__button"> <span>Tell me more</span> </a>
https://jsfiddle.net/6ewvbq75/
>您会注意到,部分动画在页面加载时播放.这是一个已知的问题,您可以做的是将动画类应用于悬停.这看起来同样好,但避免了页面加载时这些按钮的尴尬动画：https://jsfiddle.net/b5sc9xrp/
>所有的动画都存储在关键帧中.悬停或鼠标悬停动画应用于分配到例如.button：hover span指令.在标准声明中指定了鼠标输出.按钮范围有点反直觉,因此值得一提.没有：没有悬停.
>在动画分配中转发关键字意味着动画只会向前播放并停止.这是关键.例如,当我们将文本向右滑动并淡出时,我们希望它保持在最后一个关键帧上.没有转发,动画将跳回关键帧1.
我做了箭头元素宽2像素.我认为它比1px版本看起来更好,更少,但它是一个容易的调整.
如果您有任何其他问题,请告诉我们.这是一个有趣的小演示.
