CSS 创建边框动画

CSS用于创建漂亮而引人注目的边框动画，为网页添加了动态和趣味性。要创建边框动画，我们首先需要为要动画化的元素定义一个边框，然后使用CSS过渡和动画来为边框添加动态效果。

边框动画可用于为按钮、链接和其他交互元素创建悬停效果。它们也可以用于创建加载动画，以显示页面或元素在加载时的进度。我们还可以将边框动画应用到呼吁行动的按钮上，使其更加显眼。

方法1

我们将创建一个在用户悬停在元素上时动画化边框的悬停效果。

步骤

创建一个HTML文档，并将标题定义为“悬停效果边框动画”。
使用弹性盒子设置文档的主体，使盒子居中，并给它一个背景颜色为＃48b6ff。
定义一个名为box的类，设置内联块显示，填充10px，字体大小为18px，颜色为＃333，以及一个2px的透明边框，过渡时间为0.5s，过渡效果为ease。
给边框添加一个脉动动画，持续时间为无限，时间曲线为ease-in-out。
当鼠标悬停在盒子上时，将边框改为从红色渐变到绿色再到蓝色，并禁用脉动动画。
使用关键帧定义脉动动画，将边框颜色从红色渐变到绿色再到蓝色。
在HTML文档的主体中添加一个带有box类的div元素。
保存并在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>

方法2

在这里，我们将通过动画化加载图标的边框来创建一个加载动画。

步骤

使用<!DOCTYPE html>声明将文档类型设置为HTML。
通过打开<html>标签启动HTML文档。
在<html>标签内部添加<head>标签。
在<head>标签内部，添加<title>标签，并将文档标题设置为”Loading Border Animation”。
在<head>标签内部添加<style>标签，用于为文档添加样式。
在<style>标签内部，添加CSS规则以设置<body>元素的样式，包括将加载动画居中和设置背景颜色。
通过设置大小、形状、边框颜色和动画属性来添加CSS规则，以使加载动画具有样式。
使用@keyframes规则创建一个名为”spin”的动画。
添加transform规则以使元素旋转360度。
在<body>标签内部，添加一个class为”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>

方法3

我们将使用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>