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
創(chuàng)建一個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.
當鼠標懸停在盒子上時，將邊框從紅色漸變?yōu)榫G色再到藍色，并禁用脈動動畫
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>標簽內(nèi)部添加<head>標簽。
在<head>標簽內(nèi)，添加一個<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規(guī)則來樣式化加載動畫。
使用 @keyframes 規(guī)則創(chuàng)建一個名為 “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秒內(nèi)動畫化。
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”動畫應用于元素的初始狀態(tài)。
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
然而，邊框動畫有時可能會導致性能問題，特別是在過度使用或應用于大型元素時，會導致頁面加載時間變慢和整體性能降低。一些較舊的網(wǎng)絡瀏覽器可能不支持某些動畫技術。
我們還可以使用SVG圖形和JavaScript創(chuàng)建邊框動畫。它們允許更復雜的動畫，并提供對動畫的更多控制。
以上就是使用 CSS 創(chuàng)建邊框動畫的詳細內(nèi)容，更多請關注www.92cms.cn其它相關文章！
