./20170311/241911.header
ADVERTISEMENT

看百度怎麼使用css3

作為前端工程師來說,css3的運用無疑是很廣泛的,實現的奇妙效果也是豐富多彩。它的優點遠不止於能讓你的頁面酷炫非常,一個好的css3運用能給體驗者一種莫名的心曠神怡嘿嘿嘿!

下面來看看百度是怎麼使用css3的

...

這是百度的首頁。連結:http://xuanfengge.com/demo/201406/guide/

下面我們說說這是怎麼實現的。

首先箭頭是一張圖片,然後效果其實就是用2個相同的DOM元素利用縮放動畫使這兩個箭頭交叉閃爍。

代碼附上:

//兩個箭頭的html

css代碼如下

...

圖片樣式css

...

css3縮放動畫

...

css3縮放動畫

...

效果引用

這個效果主要運用到了@keyframes的生成動畫,利用css3的scale對兩張圖片進行縮放、透明度的交叉,最終得到動畫的實現。

一個基礎的css3教程希望能給剛入門的小夥伴們帶來幫助,快動手試試吧!