国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

正如我測(cè)試的那樣，發(fā)布的代碼似乎確實(shí)可以與 styled-components 一起使用，盡管瀏覽器似乎支持 @property 仍然受到限制，例如它適用于 Chrome，但目前不適用于 Firefox，因此不會(huì)在其上播放漸變動(dòng)畫(huà)。

我嘗試創(chuàng)建所發(fā)布代碼的替代版本，而不使用 @property，它也可以在 Firefox 上運(yùn)行。如果它有用，這里有一個(gè)演示： stackblitz （代碼包含在答案末尾）。

原始發(fā)布的代碼已使用以下示例進(jìn)行了測(cè)試：stackblitz （Firefox 目前不支持 @property 的漸變動(dòng)畫(huà)）。

// Styled components
const Container = styled.div`
  height: 100%;
  background: #223;
  display: grid;
  place-items: center;
`;

const Box = styled.div`
  --border-size: 3px;
  --border-angle: 0turn;
  width: 60vmin;
  height: 50vmin;
  background-image: conic-gradient(
      from var(--border-angle),
      #213,
      #112 50%,
      #213
    ),
    conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: bg-spin 3s linear infinite;
  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }
  &:hover {
    animation-play-state: paused;
  }
  @property --border-angle {
    syntax: "";
    inherits: true;
    initial-value: 0turn;
  }
`;

export default function App() {
  return (
    
      
    
  );
}

下面是沒(méi)有 @property 的替代版本進(jìn)行比較，它使用偽元素并添加了子 div 來(lái)在 styled-components 中重新創(chuàng)建動(dòng)畫(huà)。

現(xiàn)場(chǎng)演示：stackblitz（也應(yīng)該有效）對(duì)于火狐瀏覽器）。

// Styled components
const Container = styled.div`
  min-height: 100vh;
  background: #223;
  display: grid;
  place-items: center;
`;

const Box = styled.div`
  width: 60vmin;
  height: 50vmin;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: conic-gradient(from 0turn, transparent 20%, #08f, #f03);
    animation: fallback-spin 3s linear infinite;
  }
  @keyframes fallback-spin {
    to {
      transform: scale(1000%) rotate(1turn);
    }
  }
  &:hover::before {
    animation-play-state: paused;
  }
  &:hover > div::before {
    animation-play-state: paused;
  }
`;

const Fallback = styled.div`
  position: absolute;
  inset: 3px;
  overflow: hidden;
  background-color: pink;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: conic-gradient(from 0turn, #213, #112 50%, #213);
    animation: fallback-spin 3s linear infinite;
  }
  @keyframes fallback-spin {
    to {
      transform: scale(1000%) rotate(1turn);
    }
  }
`;

export default function App() {
  return (
    
      
        
      
    
  );
}

@property 是較新的標(biāo)準(zhǔn) CSS。有關(guān) @property 的更多背景信息，請(qǐng)參見(jiàn) MDN。 p>