Question

我需要为带有圆形边框的元素设置动画（例如border-radius：25px;）。元素必须具有透明背景（找到了一个示例here，该示例似乎使用了背景颜色效果；不能使用它）。我最接近的是此CodePen here，但是该元素不使用圆形边框。

第二个CodePen中的CSS代码：

   .wrapper {
      display: table;
      margin: 0 auto;
      margin-top: 200px;
    }

    @keyframes bottomright {
      0% {
        width: 0;
        height: 0;
        padding-top: 0;
        visibility: visible;
      }
      25% {
        width: 100%;
        height: 0;
        padding-top: 0;
        visibility: visible;
      }
      50% {
        height: 100%;
        width: 100%;
        visibility: visible;
      }
      75% {
        visibility: visible;
      }
      100% {
        visibility: visible;
      }
    }

    @keyframes revbottomright {
      0% {
        width: 100%;
        height: 100%;
        visibility: visible;
      }
      25% {
        width: 100%;
        height: 100%;
        visibility: visible;
      }
      50% {
        width: 100%;
        height: 100%;
        visibility: visible;
      }
      75% {
        width: 100%;
        height: 0;
        padding-top: 0;
        visibility: visible;
      }
      100% {
        width: 0;
        height: 0;
        padding-top: 0;
        visibility: hidden;
      }
    }

    @keyframes topleft {
      0% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
      }
      25% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
      }
      50% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
      }
      75% {
        width: 100%;
        height: 0;
        padding-bottom: 0;
        visibility: visible;
      }
      100% {
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
      }
    }

    @keyframes revtopleft {
      0% {
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
      }
      25% {
        width: 100%;
        height: 0;
        padding-bottom: 0;
        visibility: visible;
      }
      50% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
      }
      75% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
      }
      100% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
      }
    }

    a {
      font-family: Gotham, Tahoma, sans-serif;
      font-weight: 900;
      letter-spacing: 1px;
      color: #aaa;
      transition: color 0.75s ease-in-out;
      text-decoration: none;
      text-transform: uppercase;
      padding: 10px;
      position: relative;
      border: 5px solid pink;
    }

    a:hover {
      color: #333;
      transition: color 0.75s ease-in-out;
    }

    a:after {
      content: "";
      position: absolute;
      bottom: -5px;
      padding-right: 5px;
      left: -5px;
      width: 100%;
      height: 100%;
      border-bottom: 5px solid #333;
      border-right: 5px solid #333;
      visibility: hidden;
    }

    a:before {
      content: "";
      position: absolute;
      top: -5px;
      right: -5px;
      padding-left: 5px;
      width: 100%;
      height: 100%;
      border-top: 5px solid #333;
      border-left: 5px solid #333;
      visibility: hidden;
    }

    a:hover:before {
      animation: topleft 0.5s ease-in-out forwards;
    }

    a:hover:after {
      animation: bottomright 0.5s ease-in-out forwards;
    }

    a.active:before {
      animation: revtopleft 0.5s ease-in-out forwards;
    }

    a.active:after {
      animation: revbottomright 0.5s ease-in-out forwards;
    }

    a.active:before,
    a.active:after {
      width: 100%;
      height: 100%;
      visibility: visible;
    }

    a.temp:before, a.temp:after {
      width: 100%;
      height: 100%;
      visibility: visible;
    }

Answer 1

您可以通过创建弯曲路径和动画描边来轻松使用SVG元素执行此操作：

svg {
  width: 200px;
  border:1px solid;
}

svg path {
  stroke: red;
  stroke-width: 5px;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  fill: transparent;
  transition:1s;
}
svg:hover path{
  stroke-dashoffset: 0;
}

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 64 40'>
  <path d='M14 40 L50 40 C56 40 58 36 58 32 L58 24 C58 20 56 16 50 16 L14 16 C8 16 6 20 6 24 L6 32 C6 36 8 40 14 40 Z' />
  <text x=18 y=33>text</text>
</svg>

使用透明背景CSS绘制圆形边框动画

1 个答案: