資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用CSS建立邊框動畫
CSS用於建立美觀且引人入勝的邊框動畫，為網頁增添動感和趣味。要建立邊框動畫，我們首先需要為要動畫的元素定義邊框，然後使用CSS過渡和動畫為邊框新增動效。
邊框動畫可用於為按鈕、連結和其他互動式元素建立懸停效果。它們還可用於建立載入動畫，在頁面或元素載入時顯示進度。我們還可以將邊框動畫用於號召性用語按鈕，以使其更醒目。
方法一
我們將建立一個懸停效果，當用戶將滑鼠懸停在元素上時，該效果會為元素的邊框設定動畫。
演算法
建立一個HTML文件，並將標題設定為“懸停效果邊框動畫”。
使用flexbox設定文件的主體，以居中顯示框併為其提供#48b6ff的背景顏色。
定義一個box類，該類具有內聯塊顯示、10px的填充、18px的字型大小、#333的顏色和一個2px實心透明邊框，該邊框以0.5s的緩動過渡。
使用無限持續時間和緩入緩出時間為邊框新增脈衝動畫。
當滑鼠懸停在框上時，將邊框更改為從紅色到綠色到藍色的漸變，並停用脈衝動畫。
使用關鍵幀定義脈衝動畫，該關鍵幀將邊框顏色從紅色更改為綠色再更改為藍色。
將具有box類的div元素新增到HTML文件的主體。
儲存並在Web瀏覽器中檢視HTML檔案，以檢視懸停效果邊框動畫。
示例
<!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>
方法二
在這裡，我們將透過為載入圖示的邊框設定動畫來建立載入動畫。
演算法
使用<!DOCTYPE html>宣告將文件型別宣告為HTML。
透過開啟<html>標籤開始HTML文件。
在<html>標籤內新增<head>標籤。
在<head>標籤內，新增<title>標籤，並將文件的標題指定為“載入邊框動畫”。
在<head>標籤內新增<style>標籤，以向文件新增樣式。
在<style>標籤內，新增CSS規則以設定<body>元素的樣式，包括居中載入動畫和設定背景顏色。
新增CSS規則以透過設定其大小、形狀、邊框顏色和動畫屬性來設定載入動畫的樣式。
使用@keyframes規則建立一個名為“spin”的動畫。
新增transform規則以將元素旋轉360度。
在<body>標籤內，新增一個具有“loading”類的<div>元素以顯示載入動畫。
示例
<!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>
方法三
我們將使用CSS將邊框動畫應用於號召性用語按鈕。
演算法
建立一個容器並將其居中。
使用邊框設定元素的樣式，該邊框最初是透明的，並且過渡屬性會在0.5秒內為邊框設定動畫。
為元素建立懸停效果，該效果將邊框更改為三種顏色的線性漸變：紅色、綠色和藍色。
定義一個名為“border-pulse”的關鍵幀動畫，該動畫會隨著時間的推移更改元素的邊框顏色。
最初將“border-pulse”動畫應用於元素。
當滑鼠懸停在元素上時，透過將其設定為“none”來停用“border-pulse”動畫。
示例
<!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>
結論
但是，邊框動畫有時會導致效能問題，尤其是在過度使用或用於大型元素時，這會導致頁面載入時間變慢並降低整體效能。某些舊版Web瀏覽器可能不支援某些動畫技術。
我們還可以使用SVG圖形和JavaScript建立邊框動畫。它們允許更復雜的動畫，並提供對動畫的更多控制。
4K+ 次瀏覽
