使用 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 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

创建一个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>