使用 CSS 建立邊框動畫-css教學-PHP中文網

首頁

web前端

css教學

使用 CSS 建立邊框動畫

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 08, 2023 am 08:57 AM

使用 CSS 创建边框动画

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"。
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

使用宣告將文件類型宣告為HTML。
Start the HTML document by opening the tag.
在標籤內部加上
標籤。
在
標籤內，新增一個標籤，並將文件的標題設為"Loading Border Animation"。
Add a
#Inside the
透過設定其大小、形狀、邊框顏色和動畫屬性，新增一個CSS規則來樣式化載入動畫。
使用 @keyframes 規則建立一個名為 "spin" 的動畫。
Add the transform rule to rotate the element 360 degrees.

Inside the

tag, add an

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>