gpt4 book ai didi

html - 转换在 anchor 上无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 07:37:15 25 4
gpt4 key购买 nike

我正在尝试为一个按钮制作动画,使其在特定时间向右平移一点,但不知何故过渡从未发生。

@keyframes moveXpath {
0% {
transform: translateX(-10px);
}
100% {
transform: translateX(100px);
}
}

.btn-animate {
animation-name: moveXpath;
animation-duration: 10s;
}
<body>
<div class="container">
<h1>button animation</h1>
<div class="buttons">
<a href="#" class="btn-animate">rotating button</a>
</div>
</div>
</body>

浪费了一些时间,无法弄清楚哪里出了问题,有什么帮助吗?

最佳答案

anchor 是内联元素,转换不适用于这些类型的元素。

向 anchor 添加不同的显示( block 或内联 block )

.btn-animate {
animation-name: moveXpath;
animation-duration: 10s;
display: inline-block;
}

来源:w3.org

关于html - 转换在 anchor 上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48843813/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com