css3功能很強大哈,實現動畫功能很方便,今天在這裡分享怎麼實現類似星星眨眼,忽隱忽現,一亮一閃的功能……
同樣,我們先知道css3的幾個屬性:
1. box-shadow:向框新增乙個或多個陰影,
box-shadow: 水平陰影距離(必須)垂直陰影距離(必須) 模糊距離(可選) 陰影尺寸(可選) 顏色(可選) 陰影型別(可選);如:box-shadow: 1em 2em 1em #fff;
2. animation:建立動畫,非常強大,不過需要了解@keyframes規則
@keyframes 動畫名稱
to:}
動畫效果設定好後,將其繫結到選擇器上,animation:動畫名稱(必選) 動畫時長(必選);
注意:internet explorer 10、firefox 以及 opera 支援 @keyframes 規則和 animation 屬性。
chrome 和 safari 需要字首 -webkit-。internet explorer 9,以及更早的版本,不支援 @keyframes 規則或 animation 屬性。
ok,了解以上概念後,若想實現邊框的忽隱忽現功能,設定動畫,這裡利用box-shadow, 如
@keyframes circle-light
to }
@-webkit-keyframes circle-light
to }
.home-like img
最終效果如下:
我們也可以通過改變opacity來設定效果,不過需要事先設定邊框,個人覺得相對麻煩些。
如有更好建議,希望指正,謝謝!
css 科技 邊框 CSS3 邊框
css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...
css 科技 邊框 CSS3 邊框
css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...
css3 設計多色邊框
css3中有關於border的屬性一共有三個 設計圓角border radius 設計邊框背景border image 設計多色邊框 border color。現在我們來說一說設計多色邊框border color屬性 那麼在css3 中這個屬性又有什麼不同之處呢?又將如何使用呢?在css2 中,我們...