Рисование круглой границы анимации с прозрачным фоном CSS - PullRequest
Новая
       11

Рисование круглой границы анимации с прозрачным фоном CSS

0 голосов
/ 11 января 2019

Мне нужно анимировать элемент с круглыми границами (например, border-radius: 25px;). Элемент должен иметь прозрачный фон (нашел пример здесь , который, кажется, использует эффект цвета фона; не может использовать это). Самое близкое, что я получил, - это CodePen здесь , однако этот элемент не использует круглые границы.

CSS-код из второго CodePen: 

   .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;
    }

1 Ответ

0 голосов
/ 11 января 2019

Вы можете легко сделать это с элементом 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>
...