如何做出炫酷的CSS效果

今天来说说如何做出炫酷的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文件进行控制啦
这个我们有空继续说~~
今天就先说这么多吧!

你们快去试试那个敲好用的网站!!绝对良心推荐

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,944评论 25 709
  • 第一篇《斩笔小结》,主要是从外部数据的结果来反思。本篇小结,将从自己的心得体会出发去思考。 一、没有心的文字没有吸...
    八er阅读 268评论 2 0
  • 一个孩子自己爬到桌上下不来,开始哭泣。如果他哭到声嘶力竭妈妈还不来,这是“坏妈妈”。如果哭到焦虑,但未到...
    汇言外语李波阅读 534评论 0 0
  • 年年岁岁,岁岁年年,辗转间又是一年的最后一天。 闲暇时间,我们都在谈岁月无情,一晃眼自己步入中年,落地的娃娃已经长...
    铭悦阅读 260评论 0 1