CSS中的星星就像我們在夜空中看到的那樣美麗,可以用來裝飾網頁元素,增添視覺效果。
最基礎的星星其實就是一個五邊形,可以用CSS的偽元素before和after來實現。
.star{ width:30px; height:30px; position:relative; margin-right:10px; } .star:before, .star:after{ content:''; position:absolute; width:0px; height:0px; border-left:15px solid transparent; border-right:15px solid transparent; } .star:before{ top:0; border-bottom:18px solid #f0a51a; } .star:after{ bottom:0; border-top:18px solid #f0a51a; transform:rotate(180deg); }
上述代碼中,通過給星星元素的before和after偽元素添加不同的邊框樣式,實現了五邊形的效果,然后通過旋轉after實現了鏡像對稱的效果。
當然,這只是最基礎的一種星星,我們還可以通過調整邊框樣式、利用漸變、圓角等來實現各種不同的星星效果。
例如下面的代碼可以實現帶陰影效果的五角星:
.star2{ width:45px; height:45px; position:relative; margin-right:10px; } .star2:before, .star2:after{ content:''; position:absolute; width:0px; height:0px; border-left:22.5px solid #ffe900; border-right:22.5px solid #ffe900; } .star2:before{ top:0; border-bottom:27px solid #ffe900; transform:rotate(36deg); box-shadow:0 0 5px #fff; } .star2:after{ bottom:0; border-top:27px solid #ffe900; transform:rotate(-36deg); box-shadow:0 0 5px #fff; }
以上兩種星星的代碼只是CSS中星星實現的冰山一角,CSS中的創意和實現無盡,您可以嘗試自己創造出不同種類的星星效果,讓您的網頁更加生動有趣。
上一篇mysql 隊列權限
下一篇css的滾動條