CSS is used to create beautiful and engaging border animations, which add movement and interest to a web page. To create border animation, we will first need to define a border for the element we want to animate, then we’ll use CSS transitions and animations to add movement to the border.
Border animations can be used to create hover effects on buttons, links, and other interactive elements. They can also be used to create loading animations that show progress while a page or element is loading. We can also use border animations on call-to-action buttons to make them more noticeable.
Approach - 1
we will create a hover effect that animates the border of an element when a user hovers over it.
Algorithm
-
创建一个HTML文档，并将标题定义为"Hover Effect Border Animation"。
立即学习“前端免费学习笔记（深入）”；
设置文档的主体，使用flexbox来居中盒子，并给它一个背景颜色为#48b6ff
定义一个具有inline-block显示、10px的padding、18px的字体大小、颜色为#333的box类，并且具有2px的透明实线边框，过渡时间为0.5s，过渡效果为ease
Add a pulsing animation to the border with an infinite duration and ease-in-out timing. 当鼠标悬停在盒子上时，将边框从红色渐变为绿色再到蓝色，并禁用脉动动画
Define the pulsing animation with a keyframe that changes the border color from red to green to blue. 在HTML文档的body中添加一个带有box类的div元素
Save and view the HTML file in a web browser to see the hover effect border animation.
Example
的中文翻译为：示例
<!DOCTYPE html>
<html>
<head>
<title>Hover Effect Border Animation</title>
<style>
/* Set up the body with flexbox to center the box */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #48b6ff;
min-height: 100vh;
}
/* Style the box with a transparent border */
.box {
display: inline-block;
padding: 10px;
font-size: 18px;
color: #333;
border: 2px solid transparent;
transition: border 0.5s ease;
/* Add the pulsing animation to the border */
animation: border-pulse 2s ease-in-out infinite;
}
/* When the box is hovered, change the border to a gradient and disable the pulsing animation */
.box:hover {
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
animation: none;
}
/* Define the pulsing animation */
@keyframes border-pulse {
0% {
border-color: #f00;
}
50% {
border-color: #0f0;
}
100% {
border-color: #00f;
}
}
</style>
</head>
<body>
<!-- Add the box element to the HTML -->
<div class="box">
Hover over me
</div>
</body>
</html>
方法 - 2
Here, we will create a loading animation by animating the border of the loading icon.
Algorithm
使用<!DOCTYPE html>声明将文档类型声明为HTML。
Start the HTML document by opening the <html> tag.
在<html>标签内部添加<head>标签。
在<head>标签内，添加一个<title>标签，并将文档的标题设为"Loading Border Animation"。
Add a <style> tag inside the <head> tag to add styling to the document.
Inside the <style> tag, add CSS rules to style the <body> element, including centering the loading animation and setting the background color.
通过设置其大小、形状、边框颜色和动画属性，添加一个CSS规则来样式化加载动画。
使用 @keyframes 规则创建一个名为 "spin" 的动画。
Add the transform rule to rotate the element 360 degrees.
Inside the <body> tag, add an <div> element with a class of "loading" to display the loading animation.
Example
的中文翻译为：示例
<!DOCTYPE html>
<html>
<head>
<title>Loading Border Animation</title>
<style>
/* Styling the body element to center the loading animation */
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: rgb(253, 114, 114);
}
/* Styling the loading element */
.loading {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #3498db; /* Changing the top border color */
border-radius: 50%; /* Making the border round */
animation: spin 1s linear infinite; /* Adding animation to spin continuously */
margin: 50px auto; /* Centering the element with margin */
}
/* Defining the animation */
@keyframes spin {
to {
transform: rotate(360deg); /* Rotating the element 360 degrees */
}
}
</style>
</head>
<body>
<div class="loading"></div> <!-- The loading element -->
</body>
</html>
Approach - 3
我们将使用CSS对呼叫到行动按钮应用边框动画。
Algorithm
Create a container and center it.
使用初始为透明的边框和过渡属性对元素进行样式设置，使边框在0.5秒内动画化。
Create a hover effect for the element that changes the border to a linear gradient of three colors: red, green, and blue.
定义一个名为 "border-pulse" 的关键帧动画，随着时间的推移改变元素的边框颜色。
将“border-pulse”动画应用于元素的初始状态。
When the element is hovered over, disable the "border-pulse" animation by setting it to "none".
Example
的中文翻译为：示例
<!DOCTYPE html>
<html>
<head>
<title>Call to Action Border Animation</title>
<style>
/* Set the background color and center content vertically */
body {
background-color: #48b6ff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
/* Style the button */
.cta-button {
display: inline-block;
position: relative;
padding: 16px 32px;
background-color: #ff4d4d;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
border: none;
overflow: hidden;
transition: all 0.4s ease-out;
}
/* Add a pseudo-element to create the border animation */
.cta-button:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
z-index: -1;
transition: all 0.4s ease-out;
}
/* Change the background and text color on hover */
.cta-button:hover {
background-color: #fff;
color: #ff4d4d;
}
/* Animate the pseudo-element to create the border animation */
.cta-button:hover:before {
width: 110%;
}
</style>
</head>
<body>
<a href="#" class="cta-button">Click Me</a>
</body>
</html>
Conclusion
然而，边框动画有时可能会导致性能问题，特别是在过度使用或应用于大型元素时，会导致页面加载时间变慢和整体性能降低。一些较旧的网络浏览器可能不支持某些动画技术。
我们还可以使用SVG图形和JavaScript创建边框动画。它们允许更复杂的动画，并提供对动画的更多控制。
