需要修復CSS3加載器周圍的模糊像素

我正在製作一個css3加載器動畫，並且我很難使它變得非常脆。由於我基本上使用了兩個圓圈，因爲兩個重疊的圓圈，所以邊緣會出現輕微的凹凸。需要修復CSS3加載器周圍的模糊像素

關於如何解決這個問題的任何想法？

<div class="loader loader-2"></div> 

<style type="text/css"> 
body { 
    max-width: 1000px; 
    margin: 100px auto 0; 
    padding-left: 6.25%; 
} 

.loader { 
    position: relative; 
    display: inline-block; 
    margin: 0 12.5% 100px; 
    width: 58px; 
    height: 58px; 
    border: 2px solid #0cf; 
    border-radius:50%; 
    box-sizing: border-box; 

    animation: spin 4.5s infinite linear; 
} 
.loader::before, 
.loader::after { 
    left: -2px; 
    top: -2px; 
    display: none; 
    position: absolute; 
    content: ''; 
    width: inherit; 
    height: inherit; 
    border: inherit; 
    border-radius: inherit; 
    box-sizing: border-box; 
} 


/* 
* LOADER 2 
*/ 
.loader-2 { 
    border-top-color: transparent; 
    background-clip: content-box; 
    background-clip: border-box; 
} 
.loader-2::after { 
    display: block; 
    left: -2px; 
    top: -2px; 
    border: inherit; 
    transform: rotate(300deg); 
    background-clip: content-box; 
    background-clip: border-box; 
    border-top: 2px solid transparent; 
    border-left: 2px solid transparent; 
    border-bottom: 2px solid transparent; 
} 

.stopped { 
    animation: spin 1004.5s infinite linear; 
} 

@keyframes spin { 
    from { 
    transform: rotate(0deg); 
    } 
    to { 
    transform: rotate(360deg); 
} 

</style>

來源

2013-10-16 stwhite

transform旨意經常使對象模糊的外觀由於瀏覽器操縱元件的方式。它在Chrome中看起來不錯，但所有的瀏覽器都會使它稍有不同。

一來可能幫助模糊的辦法就是擴大規模，旋轉，然後縮減下來，像這樣：

transform: scale(4) rotate(0deg) scale(0.25);

退房調整的演示，瞭解如果這是任何保鮮盒：http://codepen.io/shshaw/pen/yiHts

編輯：如果背景顏色是已知的，那麼你可以有圓的僞部件頂蓋部分，這將提供更好的一點：http://codepen.io/shshaw/pen/pzFtG

隨着SVG，你可以掩蓋，但眉宇間SER的支持也不是很大：http://caniuse.com/#search=mask這裏的演練，看看是否可能是你所需要的：http://thenittygritty.co/css-masking

根據我們的談話，最好的選擇可能是在一個使用上有輕微的轉動僞元素clip：http://codepen.io/shshaw/pen/JeBHk

來源

2013-10-16 18:25:40 shshaw

這是真的。你能看到四分之一圓圈和3/4圓圈重疊的地方嗎？正因爲如此，它似乎是旋轉是脫髮。我基本上希望我可以在最終結果的內部和外部運行一個掩模來削減額外的 – stwhite

啊是的。如果背景顏色是已知的，那麼你可以讓psuedo元素將「clip」切出圓圈，這樣會更好一些：http://codepen.io/shshaw/pen/pzFtG – shshaw

另一種可能性是使用' clip'。結合'border-top-width：0'實際上是一個相當不錯的效果：http://codepen.io/shshaw/pen/JeBHk – shshaw

需要修復CSS3加載器周圍的模糊像素

回答

相關問題