CSS：如何創建類似於iOS圖標的反射光芒的按鈕？

Question

我試圖使用CSS來設置我的HTML按鈕樣式，以便它們具有像iOS設備主頁上的圖標一樣的反射光芒。蘋果會自動執行此操作，如here所示。我需要類似於CSS中的光芒。

Answer 1

看看this fiddle。

下面的代碼：

HTML：

<div class="icon"> 
    <div class="shine"></div> 
</div> 

和CSS：

.icon { 
    width: 150px; 
    height: 150px; 
    border-radius: 30px; 
    background: red; 
    float: left; 
    margin: 50px; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5); 
} 
.shine { 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */ 
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0); /* IE6-9 */ 
    height: 90px; 
    width: 150px; 
    box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); 
    border-top-right-radius: 30px; 
    border-top-left-radius: 30px; 
    border-bottom-right-radius: 100px 40px; 
    border-bottom-left-radius: 100px 40px; 
} 

Answer 2

我的例子使用背景顏色：紅色而不是圖像，但只是將任何圖像作爲背景放在#icon div中，它也應該可以工作。

（順便說一句我用這個真棒網站：http://www.colorzilla.com/gradient-editor/的梯度）

HTML：

<div class="icon"> 
    <div class="shine"> 
    </div> 
</div> 

CSS：

.icon { 
    width:50px; 
    height:50px; 
    background-color: red; 
    overflow: hidden; 
    position: relative; 
} 
.shine { 
    position: absolute; 
    top: -70px; 
    left: -25px; 
    width:100px; 
    height:100px; 
    border-radius: 50px; 

    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Chrome10+,Safari5.1+ */ 
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 150%); /* FF3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1.5)), color-stop(100%,rgba(255,255,255,0))); /*  Chrome,Safari4+ */ 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Opera 12+ */ 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* IE10+ */ 
    background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
} 

希望工程爲您服務！