如何在按钮上的CSS中制作线条动画？

Question

我想制作动画，如果用户单击/悬停此动画运行的带有边框半径的按钮。

动画：线从左上角开始说，在边缘/边界/参数处开始行进/跟踪，然后完成沿顺时针方向的行进。

类似线动画的排序。我已经看过，但我不记得在哪里，我在CSS版本中看到过，没有SVG。

Answer 1

查看此帖子的答案。它可能不完全是您想要的东西，但可能会给您一些想法。

How to animate border drawing with jQuery?

Answer 2

这可能会有所帮助：http://tympanus.net/Development/ProgressButtonStyles/

您可以从此处下载源代码：http://tympanus.net/codrops/2013/12/12/progress-button-styles/

Answer 3

在按钮上制作CSS动画非常简单。您只需要在该按钮上定义一个类，并在CSS代码中定义将鼠标悬停在该按钮上时发生的情况。现在，如果您不想麻烦编写CSS悬停代码，则可以使用ButtonAnimations，该网站为用户提供了带有代码的多个按钮动画，以便他们可以将其实现到自己的网站中。当我从头开始编写CSS＆HTML网站时，几乎每天都会使用它。我提供了ButtonAnimation的链接。 ButtonAnimations - Create amazing looking buttons and animations with CSS, no javascript required

但是在将动画添加到按钮之前，需要先创建它。 （让我提醒您，ButtonAnimations为您提供了预先使用的按钮）

<button class='test_button'> Hello StackoverFlow! </button>

并且在CSS中执行：

.test_button {
     background-color: blue;
     border-radius: 20px;
     width: 200px;
     height: 100px;
}

此代码将执行一个HTML按钮并使用CSS对其进行样式设置。样式包括更改宽度和高度，将背景色更改为蓝色以及使用border-radius: 20px;

弯曲按钮的边缘

感谢您的阅读！希望这会有所帮助。