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 aorder for the element animation, we will first need to define 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 animations that show progress on page or -to-action buttons to make them more noticeable.
we will create a hover effect that animates the border of an element when a user hovers over it.
建立一個HTML文檔，並將標題定義為"Hover Effect Border Animation"。
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.
<!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>
Here, we will create a loading animation by animating the border of the loading icon.
使用宣告將文件類型宣告為HTML。
Start the HTML document by opening the tag.
在標籤內部加上
標籤。在
標籤內，新增一個