圓圈在Safari中看起來很鋸齒而且不太光滑

-1

我創建了一個圓形，一旦達到一定比例就會放大並淡出。當我在Google Chrome上打開它時，該圓的邊緣看起來完美而清脆。但是在Safari上，這個圓圈的邊緣看起來非常糟糕並且消失了。我添加了「webkit」，它仍然是一樣的。僅僅是因爲CSS動畫與Safari不兼容？這是我的代碼。邊緣如何看待鉻 https://gyazo.com/91a2faecb48703c4ed7e47bc3035b802 圓圈在Safari中看起來很鋸齒而且不太光滑

圖像的邊緣如何看待在Safari https://gyazo.com/0507f9bb35eb2e0fd21b620d3ba44538

的Html

<ul id="bubbles"> 

     <li id="firstCircle"></li> 



     </ul>

CSS

#bubbles li{ 
       position: relative; 
       list-style: none; 
       display: block; 
       border-radius: 100%; 
       animation: fadeAndScale 15s ease-in infinite; 
       -webkit-animation: fadeAndScale 15s ease-in infinite; 
       -ms-animation: fadeAndScale 15s ease-in infinite; 
       -moz-animation: fadeAndScale 15s ease-in infinite; 
       -o-animation: fadeAndScale 15s ease-in infinite; 
      } 

      #bubbles li:nth-child(1){ 
       width: 100px; 
       height: 100px; 
       background-color: red; 
      } 
      @keyframes fadeAndScale{ 
       0%{ 
        z-index: 100; 
        transform: scale(0) 
       } 
       100%{ 
        z-index: 0; 
        transform: scale(50); 
       } 
      } 
      @-webkit-keyframes fadeAndScale{ 
       0%{ 
        z-index: 100; 
        -webkit-transform: scale(0) 
       } 
       100%{ 
        z-index: 0; 
        -webkit-transform: scale(50); 
       } 
      }

來源

2017-04-14 Jagr

Safari瀏覽器有很多與CSS的問題，但它可能是邊界半徑和動畫的結合。 – TricksfortheWeb

所以我應該刪除邊框半徑？ – Jagr

圖片10我會使用一個圓點svg圖像，然後繼續使用css動畫縮放。

編輯：這是該網站是如何接近它...

.indiez-fow-bg-wrapper { 
 
    background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%); 
 
    background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%); 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    margin-top: 0; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
} 
 

 
@media (max-width: 600px) {} 
 

 
.indiez-fow-bg-wrapper>div { 
 
    will-change: transform; 
 
    width: 800px; 
 
    height: 800px; 
 
    position: absolute; 
 
    -webkit-transform: scale(0); 
 
    -ms-transform: scale(0); 
 
    transform: scale(0); 
 
    margin-top: -250px; 
 
    margin-left: -250px; 
 
} 
 

 
.indiez-fow-bg-wrapper>div:not(._touch) { 
 
    border-radius: 50%; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .indiez-fow-bg-wrapper>div { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin-top: -150px; 
 
    margin-left: -150px; 
 
    } 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__violet { 
 
    left: 25%; 
 
    top: 15%; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__violet._touch { 
 
    left: auto; 
 
    right: -10%; 
 
    top: 5%; 
 
    -webkit-animation: scaleUp 16s linear forwards; 
 
    animation: scaleUp 16s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__violet:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #411AFA 4%, #9400FF 74%); 
 
    background: linear-gradient(45deg, #411AFA 4%, #9400FF 74%); 
 
    -webkit-animation: scaleUp 20s linear forwards; 
 
    animation: scaleUp 20s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__red { 
 
    top: 25%; 
 
    right: 5%; 
 
    -webkit-animation: scaleUp 20s 4.5s linear forwards; 
 
    animation: scaleUp 20s 4.5s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__red:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #F14545 0%, #E7219B 100%); 
 
    background: linear-gradient(45deg, #F14545 0%, #E7219B 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__red._touch { 
 
    right: auto; 
 
    left: 25%; 
 
    top: 30%; 
 
    -webkit-animation: scaleUp 16s 3s linear forwards; 
 
    animation: scaleUp 16s 3s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__mint { 
 
    top: 200px; 
 
    left: 20%; 
 
    -webkit-animation: scaleUp 20s 9s linear forwards; 
 
    animation: scaleUp 20s 9s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__mint:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #01C961 0%, #00FFA2 100%); 
 
    background: linear-gradient(45deg, #01C961 0%, #00FFA2 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__mint._touch { 
 
    -webkit-animation: scaleUp 16s 6s linear forwards; 
 
    animation: scaleUp 16s 6s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__sunflower { 
 
    bottom: 0px; 
 
    right: 100px; 
 
    -webkit-animation: scaleUp 20s 13.5s linear forwards; 
 
    animation: scaleUp 20s 13.5s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__sunflower:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #FFB100 0%, #FFE938 100%); 
 
    background: linear-gradient(45deg, #FFB100 0%, #FFE938 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__sunflower._touch { 
 
    -webkit-animation: scaleUp 16s 9s linear forwards; 
 
    animation: scaleUp 16s 9s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__purple { 
 
    top: 300px; 
 
    left: 10%; 
 
    -webkit-animation: scaleUp 20s 18s linear forwards; 
 
    animation: scaleUp 20s 18s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__purple:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #FF519F 0%, #BE42FF 100%); 
 
    background: linear-gradient(45deg, #FF519F 0%, #BE42FF 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__purple._touch { 
 
    -webkit-animation: scaleUp 16s 12s linear forwards; 
 
    animation: scaleUp 16s 12s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__royal-blue { 
 
    top: 10%; 
 
    right: 10%; 
 
    -webkit-animation: scaleUp 20s 22.5s linear forwards; 
 
    animation: scaleUp 20s 22.5s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__royal-blue:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #2500DA 0%, #009BFF 100%); 
 
    background: linear-gradient(45deg, #2500DA 0%, #009BFF 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__royal-blue._touch { 
 
    -webkit-animation: scaleUp 16s 15s linear forwards; 
 
    animation: scaleUp 16s 15s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__orange { 
 
    bottom: 0; 
 
    left: 100px; 
 
    -webkit-animation: scaleUp 20s 27s linear forwards; 
 
    animation: scaleUp 20s 27s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__orange:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%); 
 
    background: linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__orange._touch { 
 
    -webkit-animation: scaleUp 16s 18s linear forwards; 
 
    animation: scaleUp 16s 18s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__lime { 
 
    top: 25%; 
 
    right: 200px; 
 
    -webkit-animation: scaleUp 20s 31.5s linear forwards; 
 
    animation: scaleUp 20s 31.5s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__lime:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #79E200 0%, #B2951B 100%); 
 
    background: linear-gradient(45deg, #79E200 0%, #B2951B 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__lime._touch { 
 
    -webkit-animation: scaleUp 16s 21s linear forwards; 
 
    animation: scaleUp 16s 21s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__aqua { 
 
    top: 25%; 
 
    left: 15%; 
 
    -webkit-animation: scaleUp 20s 36s linear forwards; 
 
    animation: scaleUp 20s 36s linear forwards; 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__aqua:not(._touch) { 
 
    background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%); 
 
    background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%); 
 
} 
 

 
.indiez-fow-bg-wrapper._animate .__aqua._touch { 
 
    -webkit-animation: scaleUp 16s 12s linear forwards; 
 
    animation: scaleUp 16s 12s linear forwards; 
 
} 
 

 
@-webkit-keyframes scaleUp { 
 
    60% { 
 
    -webkit-transform: scale(5); 
 
    transform: scale(5); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(0); 
 
    transform: scale(0); 
 
    } 
 
} 
 

 
@keyframes scaleUp { 
 
    60% { 
 
    -webkit-transform: scale(5); 
 
    transform: scale(5); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(0); 
 
    transform: scale(0); 
 
    } 
 
}

<div class="indiez-fow-bg-wrapper _animate"> 
 
    <div class="__violet "> 
 

 
    </div> 
 
    <div class="__red "> 
 

 
    </div> 
 
    <div class="__mint "> 
 

 
    </div> 
 
    <div class="__sunflower "> 
 

 
    </div> 
 
    <div class="__purple "> 
 

 
    </div> 
 
    <div class="__royal-blue "> 
 

 
    </div> 
 
    <div class="__orange "> 
 

 
    </div> 
 
    <div class="__lime "> 
 

 
    </div> 
 
    <div class="__aqua "> 
 

 
    </div> 
 
</div>

來源

2017-04-15 04:45:07

我會嘗試，但它看起來像它的作品，但當我使用縮放，它不增加在一個設置的位置。它正在向下移動一個對角線。 – Jagr

你可以嘗試背景位置：50％50％ –

嗯，我添加了「變換：翻譯」，而不是它的工作。感謝您的幫助：D在Safari上真的很漂亮。 – Jagr

圓圈在Safari中看起來很鋸齒而且不太光滑

回答

相關問題