如何才能逆時針顯示元素？

Question

我想以逆時針方式顯示圖像作爲動畫？更確切地說，我想揭示一顆星星的某種中風，所以它給人的感覺就是它被繪製出來。而所有這一切只有在CSS3。可能嗎？

Answer 1

這種方法是基於關閉凱爾Ĵ拉爾森的崗位上How to Create Pie Charts with CSS3 +一些CSS3動畫

DEMO（code view）

<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRnxxoXUA200QV3f8ERe_3wM40HdwUUhx-Gyvh6Lurs27DcxksSWoUnsMfP" /> 
<div class="outer"><div class="inner"></div></div> 
<div class="outer2"><div class="inner2"></div></div>​ 

CSS：

img {position:absolute;top:33px;left:32px;} 
.outer { 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:rgba(255, 0, 0, .5); 
    background:transparent; 
    clip: rect(0, 150px, 300px, 0); 
    /*clip: initial;*/ 
} 

.inner { 
    position:absolute; 
    background:rgba(0, 255, 0, .5); 
    background:#fff; 
    width:300px; 
    height:300px; 
    clip: rect(0, 300px, 300px, 150px); 
    /*clip: initial;*/ 
    -webkit-transform:rotate(-180deg); 
    border-radius:150px; 
    -webkit-animation:innerAnim 3s 1 linear forwards; 
} 
.outer2 { 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:rgba(127, 127, 0, .5); 
    background:transparent; 
    -webkit-transform:rotate(-180deg); 
    clip: rect(0, 150px, 300px, 0); 
    /*clip: initial;*/ 
} 

.inner2 { 
    position:absolute; 
    background:rgba(0, 0, 255, .5); 
    background:#fff; 
    width:300px; 
    height:300px; 
    clip: rect(0, 300px, 300px, 150px); 
    /*clip: initial;*/ 
    -webkit-transform:rotate(180deg); 
    border-radius:150px; 
    -webkit-animation:innerAnim2 3s 1 linear forwards 3s; 
} 

@-webkit-keyframes innerAnim { 
    from { 
     -webkit-transform:rotate(-180deg); 
    } 
    to { 
     -webkit-transform:rotate(0deg); 
    } 
} 

@-webkit-keyframes innerAnim2 { 
    from { 
     -webkit-transform:rotate(180deg); 
    } 
    to { 
     -webkit-transform:rotate(0deg); 
    } 
} 
​ 

注：有2 01每類種風格，除去第二拿到的動畫是如何工作

，你甚至可以使從CSS的明星一個更好的主意（見：http://3easy.org/buildmobile/jquerymobile/#star）

編輯：加入供應商前綴的jsfiddle

Answer 2

我唯一能想到的就是使用keyframes和動畫屬性。

使用此功能，您可以通過將其放置在具有大量區域或div標籤的div內來遮蓋圖像。然後使用動畫，您可以「褪色」divs或areas以顯示圖像。如果您獲得隱藏圖像的元素的位置和密度，它可能看起來好像圖像正在繪製。

here is a very rudimentary example that uses 4 divs遮蔽星形圖像。如果你製作更多的div，並將它們放置在明星身上，你可以很容易地透露它們。

這可能可以用較少的CSS完成，但這只是一個簡單的例子。