使用 CSS 建立邊框動畫
- WBOY轉載
- 2023-09-08 08:57:091211瀏覽
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.
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
使用8b05045a5be5764f313ed5b9168a17e6宣告將文件類型宣告為HTML。
Start the HTML document by opening the 100db36a723c770d327fc0aef2ce13b1 tag.
在100db36a723c770d327fc0aef2ce13b1標籤內部加上93f0f5c25f18dab9d176bd4f6de5d30e標籤。
在93f0f5c25f18dab9d176bd4f6de5d30e標籤內，新增一個b2386ffb911b14667cb8f0f91ea547a7標籤，並將文件的標題設為"Loading Border Animation"。
Add a c9ccee2e6ea535a969eb3f532ad9fe89 tag inside the 93f0f5c25f18dab9d176bd4f6de5d30e tag to add styling to the document.
#Inside the c9ccee2e6ea535a969eb3f532ad9fe89 tag, add CSS rules to style the 6c04bd5ca3fcae76e30b72ad730ca86d 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 6c04bd5ca3fcae76e30b72ad730ca86d tag, add an dc6dce4a544fdca2df29d5ac0ea9906b 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來建立邊框動畫。它們允許更複雜的動畫，並提供對動畫的更多控制。
以上是使用 CSS 建立邊框動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！