Firefox中的影片滯后

我正在嘗試使用 CSS 為我的徽標制作影片。

它在 Opera、Chrome、Edge 等瀏覽器中運行良好，但在 Firefox 中卻落后。我嘗試將 -moz- 、 -o- 、 -webkit- 等供應商前綴添加到影片、影片延遲和變換中，但它仍然只在 Firefox 中滯后。

這是小提琴鏈接點擊這里

滾動條 css 也不適用于 Firefox

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background-color: white;
}

html::-webkit-scrollbar-thumb {
  background: var(--colorMain);
}

html::-moz-scrollbar {
  width: 10px;
}

html::-moz-scrollbar-track {
  background-color: white;
}

html::-moz-scrollbar-thumb {
  background: var(--colorMain);
}

uj5u.com熱心網友回復：

display: contents;首先，您需要洗掉.wrapper 跨度中的 ，影片將順利播放。

.wrapper span {
  /* display: contents; */
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 0 0px var(--brShadow), 0 0px var(--tlShadow);
  transform: translate(0, 100%) rotate(2deg);
  animation: jump 2s ease-in-out infinite;

  color: var(--colorMain);
}

解決第二個問題，在htmlscrollbar-color: var(--colorMain) white;類中添加屬性，因為Firefox的滾動條自定義不同。

html {
  font-size: 63.5%;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
  text-decoration: none;
  scrollbar-color: var(--colorMain) white; /* new line */
}

顯示代碼片段

:root {
  --colorMain: #4784e6;
}

* {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

html {
  font-size: 63.5%;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
  text-decoration: none;
  scrollbar-color: var(--colorMain) white; /* new line */
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background-color: white;
}

html::-webkit-scrollbar-thumb {
  background: var(--colorMain);
}

/* header section */

section {
  padding: 5rem 10%;
}

a {
  text-decoration: none;
}

.header span {
  font-size: 3rem;
  background: rgba(255, 255, 255, 0.2);
  color: var(--colorMain);
  border-radius: 0.5rem;
  padding: 0.1rem 0.1rem;
}

.wrapper {
  width: max-content;
  margin-left: 2rem;
  margin-right: 2rem;
}

.wrapper span {
  /* display: contents; */
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 0 0px var(--brShadow), 0 0px var(--tlShadow);
  transform: translate(0, 100%) rotate(2deg);
  animation: jump 2s ease-in-out infinite;

  color: var(--colorMain);
}

.wrapper span:nth-child(1) {
  animation-delay: 120ms;
}

.wrapper span:nth-child(2) {
  animation-delay: 240ms;
}

.wrapper span:nth-child(3) {
  animation-delay: 360ms;
}

.wrapper span:nth-child(4) {
  animation-delay: 480ms;
}

.wrapper span:nth-child(5) {
  animation-delay: 600ms;
}

.wrapper span:nth-child(6) {
  animation-delay: 720ms;
}

@keyframes jump {
  33% {
    text-shadow: 0 10px rgb(64, 206, 206), 0 15px #aadef2;
  }

  50% {
    transform: translate(0, 0) rotate(-4deg);
    text-shadow: 0 0px #8fc0a9, 0 0px #84a9ac;
  }

  66.67% {
    text-shadow: 0 -10px rgb(64, 206, 206), 0 -15px #8fc0a9;
  }
}

<section class="header">
  <a href="#" class="logo text-decoration-none">
    <div class="wrapper">
      <span>T</span>
      <span>R</span>
      <span>A</span>
      <span>V</span>
      <span>E</span>
      <span>L</span>
    </div>
  </a>
</section>

標籤：html css 动画 火狐 CSS动画

上一篇：SwiftUI-帶有特定樣式的文本和影像的按鈕

下一篇：JOOQ如何將具有默認值的列添加到現有表中