HTML如何实现边框动画？悬停时边框怎么动效？

<style>
  .button-hover-border {
    padding: 10px 20px;
    border: 2px solid #3498db; /* 初始边框 */
    color: #3498db;
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.3s ease, border-width 0.3s ease, color 0.3s ease; /* 定义过渡效果 */
    display: inline-block;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 16px;
    border-radius: 5px; /* 添加一点圆角，更美观 */
  }

  .button-hover-border:hover {
    border-color: #e74c3c; /* 悬停时边框颜色变化 */
    border-width: 4px; /* 悬停时边框变粗 */
    color: #e74c3c;
  }
</style>

<a href="#" class="button-hover-border">悬停我查看边框动画</a>

<style>
  .animated-border-box {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 20px;
    color: #333;
    overflow: hidden; /* 隐藏超出伪元素的部分 */
  }

  .animated-border-box::before,
  .animated-border-box::after {
    content: '';
    position: absolute;
    background: #e74c3c; /* 边框颜色 */
    transition: transform 0.3s ease; /* 伪元素自身的过渡 */
  }

  /* 顶部和底部边框 */
  .animated-border-box::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0); /* 初始宽度为0 */
    transform-origin: left; /* 从左边开始动画 */
  }

  .animated-border-box::after {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0); /* 初始宽度为0 */
    transform-origin: right; /* 从右边开始动画 */
  }

  /* 悬停时顶部和底部边框动画 */
  .animated-border-box:hover::before,
  .animated-border-box:hover::after {
    transform: scaleX(1); /* 悬停时宽度变为100% */
  }

  /* 侧边边框，可以再添加两个伪元素或使用更复杂的动画 */
  /* 这里为了演示，只做了水平边框的描绘效果 */

  /* 如果要实现四个边都描绘，通常需要四个伪元素，或者更高级的SVG/Canvas方案 */
</style>

<div class="animated-border-box">
  鼠标悬停
</div>

clip-path

mask

<style>
  .card-item {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: border-color 0.4s ease-out, box-shadow 0.4s ease-out; /* 定义过渡 */
    cursor: pointer;
    font-family: Arial, sans-serif;
    text-align: center;
    width: 180px;
    margin: 20px;
    display: inline-block;
  }

  .card-item:hover {
    border-color: #2ecc71; /* 悬停时边框颜色变绿 */
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4); /* 悬停时阴影变大变色 */
  }
</style>

<div class="card-item">
  鼠标悬停，边框和阴影都会动
</div>

<style>
  .draw-border-box {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 18px;
    color: #555;
    overflow: hidden; /* 确保伪元素超出部分被裁剪 */
    border: 1px solid transparent; /* 占位，避免布局跳动 */
  }

  .draw-border-box::before,
  .draw-border-box::after {
    content: '';
    position: absolute;
    background-color: #f39c12; /* 边框颜色 */
  }

  /* 上边框 */
  .draw-border-box::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0); /* 初始宽度为0 */
    transform-origin: left;
    transition: transform 0.3s ease-out; /* 过渡效果 */
  }

  /* 下边框 */
  .draw-border-box::after {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0); /* 初始宽度为0 */
    transform-origin: right;
    transition: transform 0.3s ease-out;
  }

  /* 左右边框，需要再加两个伪元素，或者用更巧妙的方法 */
  /* 这里我们只演示一个相对简单的左右动画，结合transform */
  .draw-border-box .left-line,
  .draw-border-box .right-line {
    content: '';
    position: absolute;
    background-color: #f39c12;
    width: 2px;
    height: 100%;
    transform: scaleY(0);
    transition: transform 0.3s ease-out;
  }

  .draw-border-box .left-line {
    top: 0;
    left: 0;
    transform-origin: top;
  }

  .draw-border-box .right-line {
    bottom: 0;
    right: 0;
    transform-origin: bottom;
  }

  /* 悬停时触发动画 */
  .draw-border-box:hover::before,
  .draw-border-box:hover::after {
    transform: scaleX(1);
  }

  .draw-border-box:hover .left-line,
  .draw-border-box:hover .right-line {
    transform: scaleY(1);
  }

  /* 配合animation实现更复杂的循环或连续效果 */
  @keyframes borderPulse {
    0% { border-color: #f39c12; }
    50% { border-color: #e74c3c; }
    100% { border-color: #f39c12; }
  }

  .pulsing-border {
    padding: 15px 30px;
    border: 2px solid #f39c12;
    animation: borderPulse 2s infinite alternate; /* 应用动画 */
    display: inline-block;
    margin: 20px;
    font-family: sans-serif;
    font-size: 16px;
    color: #333;
    border-radius: 5px;
  }
</style>

<div class="draw-border-box">
  描绘边框效果
  <span class="left-line"></span>
  <span class="right-line"></span>
</div>

<div class="pulsing-border">
  跳动边框
</div>

pulsing-border