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

问题描述 投票:0回答:3

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

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

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

css3
3个回答
1
投票

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

How to animate border drawing with jQuery?



0
投票

在按钮上制作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;

弯曲按钮的边缘

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

© www.soinside.com 2019 - 2024. All rights reserved.