html - 有没有办法在中风中加入渐变？

Question

有没有办法在笔划中添加渐变？

body {background-color:black;}

.couponimg_box {
  background-color:black;
  width:60%;
  height:550px;
  display:inline-block;
  border-radius:15px;
  margin-top:80px;
  transition: all 1s;
}
         
.btn rect {
  fill: none;
  stroke: yellow;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
  -webkit-transition: all 0.35s linear;
  transition: all 0.35s linear;
  opacity:0;  
}

.btn:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  animation: stop 1.5s ease-in-out 1;
  opacity:0;
}
  
@keyframes stop {
  0% {
    opacity:1;
  }
  25% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

<div id="coupon_box" clss="couponimg_box">
  <a href="https://twitter.com/Dave_Conner" class="btn btn-1">
    <svg>
    <rect x="0" y="0" fill="none" width="100%" height="100%"/>
    </svg>
    Hover1
  </a>
</div>

当我搜索时，人们习惯在其中包含 btn 内容的背景上放置渐变，但是，我想知道是否可以在笔划中放置渐变颜色而不是“黄色（单色）”

任何帮助将不胜感激！谢谢！:D

标签： htmlcsssvg

Answer 1

您已经在 SVG 中的某处定义了线性渐变。

body {background-color:black;}

.couponimg_box { 
  background-color:black;
  width:60%;
  height:550px;
  display:inline-block;
  border-radius:15px;
  margin-top:80px;
  transition: all 1s;
}

.btn rect {
  fill: none;
  //stroke: yellow;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
  -webkit-transition: all 0.35s linear;
  transition: all 0.35s linear;
  opacity:0;
}

.btn:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  animation: stop 1.5s ease-in-out 1;
  opacity:0;
}

@keyframes stop {
  0% {
    opacity:1;
  }
  25% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

<div id="coupon_box" clss="couponimg_box">
    <a href="https://twitter.com/Dave_Conner" class="btn btn-1">
      <svg>
        <defs>
          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#00bc9b" />
            <stop offset="100%" stop-color="#5eaefd" />
          </linearGradient>
        </defs>
        <rect x="0" y="0" fill="none" width="100%" height="100%" stroke="url(#gradient)" stroke-width="2" fill="none"/>
      </svg>
        Hover1
    </a>
</div>