CSS影片渲染-令人瞠目結舌

我已經為按鈕周圍的旋轉邊框創建了這個CodePen，雖然原理似乎很好，但它并沒有按應有的方式作業 - 渲染似乎非常緩慢和驚人（我有 M1 MacBook Pro）。

.button {
  width: 206px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  position: relative;
}
.button::after {
    content: "";
    border-radius: 35px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    clip-path: url(#mask);
    border: 3px solid black;
  }

.curve-1 {
  animation: ???????????????? 20s infinite linear;
  transform-origin: 35px center;
  //animation-play-state: paused;
  //transform: rotate(-315deg)
}
.curve-2 {
  animation: ?????????????????????????? 20s infinite linear;
  transform-origin: 35px center;
  translate: 136px 0;
}
.line {
  animation: ??????????????????????????????? 20s infinite linear;
}

svg {
  display: block;
}

@keyframes ???????????????? {
  0% {
    transform: rotate(45deg);
  }
  22% {
    transform: rotate(-135deg);
  }
  27% {
    transform: rotate(-180deg);
  }
  88% {
    transform: rotate(-180deg);
  }
  89% {
    transform: rotate(-225deg);
  }
  100% {
    transform: rotate(-315deg);
  }
}

@keyframes ?????????????????????????? {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(0deg)
  }
  39% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  72% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}



@keyframes ??????????????????????????????? {
  0%, 100% {
    width: 0;
    x: 35px;
    y: 35px;
  }
  11% {
    width: 0;
    x: 35px;
    y: 35px;
  }
  22% {
    width: 55px;
    x: 35px;
    y: 35px;
  }
  39% {
    width: 55px;
    x: 116px;
    y: 35px;
  }
  50% {
    width: 0;
    x: 171px;
    y: 35px;
  }
  61% {
    width: 0;
    x: 171px;
    y: 0;
  }
  72% {
    width: 55px;
    x: 116px;
    y: 0;
  }
  89% {
    width: 55px;
    x: 35px;
    y: 0;
  }
  100% {
    width: 0;
    x: 35px;
    y: 0;
  }
}

<div class="button">button text</div>

<svg view-box="0 0 206 70" width="206" height="70">
  <defs>
    <clipPath id="mask">
      <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-1"/>
      <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-2"/>
      <rect fill="#000" height="35" class="line">
    </clipPath>
  </defs>
</svg>
  

<svg view-box="0 0 206 70" width="206" height="70">
  <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-1"/>
  <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-2"/>
  <rect fill="#000" height="35" class="line">
 </svg>

有誰知道 CSS 渲染以及為什么會發生這種情況？

我還創建了這個CodePen，我只是想證明影片剪輯路徑是可能的，它似乎在這里作業得很好......

.masked {
  width: 500px;
  clip-path: url(#mask)
}
.mask {
  width: 500px;
}
.circle {
  animation: ???????????????? 2s infinite;
}

@keyframes ???????????????? {
  0% {
    translate: 0;
  }
  50% {
    translate: 40px;
  }
  100% {
    translate: 100px;
  }
}

<img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dHJlZXxlbnwwfHwwfHw=&auto=format&fit=crop&w=900&q=60" class="masked"/>
<svg viewport="0 0 100 60">
  <circle cx="50" cy="30" r="20" class="circle">
    </svg>
<svg width="0" height="0">
  <defs>
    <clipPath id="mask">
      <circle cx="100" cy="100" r="40" class="circle" />
    </clipPath>
  </defs>
</svg>

我不知道為什么會這樣，如果有人知道答案，我會很高興。

謝謝

uj5u.com熱心網友回復：

為什么這么復雜？使用該技術可以實作相同的影片stroke-dasharray。

對我來說，影片看起來很流暢。對你來說是否一樣可能取決于硬體，但我與你的計算能力相差甚遠。

.button {
  width: 206px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  position: relative;
  border: 3px solid transparent;
}
.button .line {
  position: absolute;
  overflow: visible;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: black;
  stroke-width: 3px;
  stroke-dasharray: 10px 90px;
  animation: around 20s linear infinite;
}
  
@keyframes around {
    0% {
      stroke-dashoffset: 100px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
}

<div class="button">button text<svg class="line" view-box="0 0 206 70">
  <path d="M35,-1.5 A 36.5 36.5 0 0 0 35,71.5 H 171 A 36.5 36.5 0 0 0 171,-1.5 Z" pathLength="100" />
</svg>

標籤：css动画svg剪辑路径

上一篇：Swiftui按鈕依次顯示一組影像

下一篇：CSS影片旋轉問題