今天来说说如何做出炫酷的CSS效果
很多人不知道什么叫CSS,今天我来用比较通俗的语言解释给大家听
以免总有人嫌弃说看不懂我说的到底是什么东西。
很简单,CSS能够创造出大部分,哦不,可以说是一切的页面能够显示出的动作效果
也就是说,如果你看到“别人家”移动专题有什么小天使在飞啊,小雨点在飘啊,等等此类,都是最简单的CSS效果能够达到的啦,也就是今天我要说的这种,稍微难一点的变换我们下次再讲哦~~
说回来,先来一段简单的代码给你们看看:
//如果你在页面上看见这样的代码:
<img id='image1' src='img1' style='animation:bounce'></img>
这就是一串代表图片元素的代码啦。
其中,
id 是一种用来分辨元素的方式,就像把一堆元素分到一个组合中一样
当然,也可以让一个元素自己成为一个组合,
总之就是这个组合一旦被调用,是一定要一起进行动作的。
src 是引用元素的标记,“=”后面跟着的就是引用元素的路径和名称。
style 就是CSS代码能够出现的地方了。
如果你希望让一个元素呈现出动作,在这个地方设置是最简单不过的了
只需要将animation后面的词汇做改动,相应的动作就会发上变化了。
至于要加什么词汇,有个比较简单的规律:
跳动:bounce
闪烁:flash
摇动:shake
淡入:fade
光速:lightSpeed
放大缩小:zoom
知道这些,自己就可以进行移动的发挥了:
比如说,bounceInLeft,就是从左边跳动进入,大概这种。
记得后面单词不要空格,大写第一个字母就好。
在这边给大家放一个特别好用的网址,能够直接显示出效果预览,
简直好用到飞起,可以收藏起来:
http://www.html5tricks.com/demo/css3-animate-css/index.html
截图是这样的:
这就是给单个元素添加CSS动作的方法
但是这个方法如果元素太多会变得比较麻烦,就要单独建立CSS文件进行控制啦
这个我们有空继续说~~
今天就先说这么多吧!
你们快去试试那个敲好用的网站!!绝对良心推荐