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

Seperti yang saya uji, kod yang disiarkan nampaknya berfungsi dengan styled-components 一起使用，盡管瀏覽器似乎支持 @property Masih terdapat pengehadan, mis. ia berfungsi pada Chrome, tetapi bukan Firefox pada masa ini, jadi animasi kecerunan tidak akan dimainkan padanya.

Saya cuba mencipta versi alternatif bagi kod yang disiarkan tanpa menggunakan @property dan ia juga berfungsi pada Firefox. Jika ia membantu, berikut ialah demo: stackblitz (kod disertakan di hujung jawapan).

Kod asal yang disiarkan telah diuji menggunakan contoh berikut: stackblitz (Firefox tidak menyokong animasi kecerunan untuk @property pada masa ini).

// 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 (
    
      
    
  );
}

Berikut ialah versi alternatif tanpa @property 的替代版本進(jìn)行比較，它使用偽元素并添加了子 div 來在 styled-components sebagai perbandingan, yang menggunakan elemen pseudo dan menambahkan div anak untuk mencipta semula animasi dalam komponen gaya.

Demo Langsung: stackblitz (juga harus berfungsi untuk Firefox).

// 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 ialah CSS standard yang lebih baharu. Untuk latar belakang lanjut tentang , lihat MDN p>. ??