为什么我的 SVG 'frame' 动画没有在悬停时播放？

Question

我被这个 CSS 动画卡住了。 悬停时框架应该是动画的。从顶部中心开始，一直画到最后。

有人对此有解决方案吗？

          @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
          body{
              font-family: 'Roboto', sans-serif;
          }
          a.teaser-card-link {
              text-decoration: none;
          }
          .card{
              background-size: cover !important;
              background-repeat: no-repeat !important;
              max-width: 425px;
              border-radius: 10px;
              overflow: hidden;
          }
          .caption {
            padding: 20px;
          }
          .dark-cover:hover {
            background: url('https://svgshare.com/i/cP2.svg');
            background-repeat: no-repeat;
            background-attachment: fixed;            
          }
          .card .caption p.card-title{
            font-size: 22px;
            font-weight: bold;
            text-align: left;
            margin: 0;
            padding: 0;
            letter-spacing: 1px;
            padding-bottom: 20px;
            margin-top: 10px;
          }
          .card .caption p.card-description{
            font-size: 16px;
            font-weight: 300;
            text-align: left;
            margin: 0;
            padding: 0;
            letter-spacing: 1px;
            line-height: 1.5em;
            padding-bottom: 20px;
          }
          .card .caption a.link-text{
            font-size: 16px;
            font-weight: 300;
            text-align: left;
            margin: 0;
            padding: 0;
            letter-spacing: 1px;
            line-height: 1.5em;
            text-decoration: none;
            color: blue;
          }
          a.teaser-card-link {
            text-decoration: none;
          }

 <div class="card"> 
            <div class="dark-cover">
                <div class="cover">
                  <img src="https://i.stack.imgur.com/jLbFE.png" class="card-image">
                    <div class="caption">
                        <p class="card-title">CARD-TEST</p>
                        <p class="card-description">Hier kannst du dich austauschen und offen über deine Gefühle und Sorgen sprechen.</p> 
                        <a href="#" class="link-text">Hier mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>

到目前为止，我已经掌握了 HTML/CSS。我不知道哪种技术最适合这个。 SVG、PNG 或纯 CSS，因为这在技术上是一个边框。

<svg class="svg-border" xmlns="http://www.w3.org/2000/svg" width="409" height="273" viewBox="0 0 409 273" fill="none">

Answer 1

您可以添加 svg 的代码并将转换添加到 stroke-dashoffset 属性

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}

a.teaser-card-link {
  text-decoration: none;
}

.card {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  max-width: 425px;
  border-radius: 10px;
  overflow: hidden;
}

.caption {
  padding: 20px;
}


.svg-border {
  position: absolute;
  left: 0;
}

.dark-cover .svg-border path {
  stroke-dasharray: 0 1213 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s;
}

.dark-cover:hover .svg-border path {
  stroke-dasharray: 0 1213 0;
  stroke-dashoffset: 1213;
}

.card .caption p.card-title {
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  padding-bottom: 20px;
  margin-top: 10px;
}

.card .caption p.card-description {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  line-height: 1.5em;
  padding-bottom: 20px;
}

.card .caption a.link-text {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  line-height: 1.5em;
  text-decoration: none;
  color: blue;
}

a.teaser-card-link {
  text-decoration: none;
}

<div class="card">
  <div class="dark-cover">
    <div class="cover">
      <img src="https://i.ibb.co/RBfxDkJ/Vector.png" class="card-image">
      <svg class="svg-border" xmlns="http://www.w3.org/2000/svg" width="409" height="273" viewBox="0 0 409 273" fill="none">
<path d="M359.013 249.05L359.036 249.048L359.059 249.046C372.423 248.323 381.287 246.263 387.415 241.958C393.488 237.693 397.044 231.098 399.478 220.852C400.472 214.751 401.014 208.608 401.099 202.457L401.1 202.441L401.1 202.425C401.826 185.916 402.511 169.404 403.196 152.896C404.578 119.605 405.96 86.33 407.667 53.1237L407.667 53.1207C407.881 49.1784 407.591 42.6982 406.02 36.1632C404.444 29.6075 401.617 23.1541 396.874 19.0845L396.84 19.0556L396.809 19.0239C392.109 14.2522 386.196 10.3001 379.441 7.43138C372.686 4.56277 365.245 2.84438 357.595 2.39153L357.577 2.39046L357.559 2.38879C353.731 2.03166 349.539 1.90534 344.812 2.12084C320.437 3.23341 296.153 4.18062 271.921 5.12577C210.717 7.51297 149.85 9.88705 88.7201 14.8793C68.9517 16.5477 53.3328 18.7741 41.1174 22.149C28.9037 25.5236 20.1743 30.0247 14.1071 36.1869C1.99865 48.4848 0.131327 67.7789 3.41751 99.5416L3.41766 99.5431C7.51328 139.68 13.2423 179.816 18.9615 219.884C19.8603 226.181 20.7589 232.476 21.6509 238.769C23.367 250.056 26.583 257.426 32.8765 262.282C39.2232 267.179 48.8871 269.672 63.8952 270.686C81.9828 271.846 100.195 271.458 118.405 271.071C127.516 270.877 136.626 270.684 145.72 270.684C153.108 270.684 183.491 267.861 219.692 264.118C255.851 260.379 297.714 255.732 327.984 252.102L327.995 252.101L328.006 252.1L359.013 249.05Z" stroke="#D76119" stroke-width="2.1225"/>
</svg>
      <div class="caption">
        <p class="card-title">CARD-TEST</p>
        <p class="card-description">Hier kannst du dich austauschen und offen über deine Gefühle und Sorgen sprechen.</p>
        <a href="#" class="link-text">Hier mehr erfahren</a>
      </div>
    </div>
  </div>
</div>