今天來說說如何做出炫酷的CSS效果
很多人不知道什么叫CSS愧膀,今天我來用比較通俗的語言解釋給大家聽
以免總有人嫌棄說看不懂我說的到底是什么東西呛凶。
很簡單旅东,CSS能夠創(chuàng)造出大部分灭抑,哦不,可以說是一切的頁面能夠顯示出的動作效果
也就是說抵代,如果你看到“別人家”移動專題有什么小天使在飛啊腾节,小雨點在飄啊,等等此類荤牍,都是最簡單的CSS效果能夠達到的啦案腺,也就是今天我要說的這種,稍微難一點的變換我們下次再講哦~~
說回來康吵,先來一段簡單的代碼給你們看看:
//如果你在頁面上看見這樣的代碼:
<img id='image1' src='img1' style='animation:bounce'></img>
這就是一串代表圖片元素的代碼啦劈榨。
其中,
id 是一種用來分辨元素的方式晦嵌,就像把一堆元素分到一個組合中一樣
當然同辣,也可以讓一個元素自己成為一個組合,
總之就是這個組合一旦被調(diào)用惭载,是一定要一起進行動作的旱函。
src 是引用元素的標記,“=”后面跟著的就是引用元素的路徑和名稱棕兼。
style 就是CSS代碼能夠出現(xiàn)的地方了陡舅。
如果你希望讓一個元素呈現(xiàn)出動作抵乓,在這個地方設置是最簡單不過的了
只需要將animation后面的詞匯做改動伴挚,相應的動作就會發(fā)上變化了。
至于要加什么詞匯灾炭,有個比較簡單的規(guī)律:
跳動:bounce
閃爍:flash
搖動:shake
淡入:fade
光速:lightSpeed
放大縮芯ビ蟆:zoom
知道這些,自己就可以進行移動的發(fā)揮了:
比如說蜈出,bounceInLeft田弥,就是從左邊跳動進入,大概這種铡原。
記得后面單詞不要空格偷厦,大寫第一個字母就好商叹。
在這邊給大家放一個特別好用的網(wǎng)址,能夠直接顯示出效果預覽只泼,
簡直好用到飛起剖笙,可以收藏起來:
http://www.html5tricks.com/demo/css3-animate-css/index.html
截圖是這樣的:
這就是給單個元素添加CSS動作的方法
但是這個方法如果元素太多會變得比較麻煩,就要單獨建立CSS文件進行控制啦
這個我們有空繼續(xù)說~~
今天就先說這么多吧请唱!
你們快去試試那個敲好用的網(wǎng)站C诌洹!絕對良心推薦