数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 设置底部边框动画的宽度？
在 CSS 中，我们可以使用 ‘border-bottom’ CSS 属性来设置 HTML 元素的底部边框。我们可以使用 animation 属性来设置底部边框宽度的动画。
此外，我们需要通过更改底部边框的宽度来定义关键帧以使其具有动画效果。
语法
用户可以遵循以下语法来设置底部边框宽度的动画。
selector {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
border-bottom: 25px solid black;
}
}
在上述语法中，我们创建了 ‘mymove’ 关键帧，以将底部边框的宽度从 5px 动画到 25px。
示例 1
在下面的示例中，我们创建了包含 ‘test’ 类的 div 元素。此外，我们还对 div 元素应用了一些 CSS 来对其进行样式设置。我们使用 ‘animation’ 属性根据 ‘mymove’ 关键帧对 div 元素进行 5 秒钟无限次动画。
在 ‘mymove’ 关键帧中，我们将底部边框的宽度更改为 0%、30%、60%、85% 和 100%。在输出中，用户可以看到底部边框宽度的动画。
<html>
<head>
<style>
.test {
width: 500px;
height: 200px;
background-color: red;
border: 2px solid green;
border-bottom: 5px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% { border-bottom: 5px solid black; }
30% { border-bottom: 15px solid black; }
60% { border-bottom: 25px solid black; }
85% { border-bottom: 15px solid black; }
100% { border-bottom: 5px solid black; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border using CSS </h2>
<div class = "test"> </div>
</html>
示例 2
在下面的示例中，我们创建了 <h2> 元素并在其中添加了一些文本内容。之后，我们使用 CSS 属性来设置元素的样式。我们还使用 ‘animation’ 属性来设置底部边框宽度的动画。
在 ‘border-animation’ 关键帧中，我们通过保持其他边框属性不变来更改边框的宽度。
<html>
<head>
<style>
.test {
width: fit-content;
border: 1px dotted blue;
border-bottom: 1px solid red;
animation: border-animation 1.5s infinite ease-in-out;
padding: 5px 10px;
color: green;
}
@keyframes border-animation {
0% { border-bottom: 1px solid red; }
30% { border-bottom: 3px solid red; }
50% { border-bottom: 5px solid red; }
70% { border-bottom: 3px solid red; }
100% { border-bottom: 1px solid red; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border of checkbox using CSS</h2>
<h2 class = "test"> Welcome to the TutorialsPoint! </h2>
</html>
用户学习了如何使用 CSS 设置底部边框宽度的动画。我们需要使用 ‘animation’ CSS 属性并为动画定义关键帧。在关键帧中，我们可以使用 ‘border-bottom’ 或 ‘border-bottom-width’ CSS 属性更改底部边框的宽度。
更新于：2023年5月17日
759 次浏览
广告