CSS3制作动画效果例子 android软件开发教程

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:05 我要评论(0)

实现网站的图片、文字的动态效果,我们有photoshop制作多帧动画GIF、用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果。然而,即使有这么多的方法可以实现动态效果,我们仍然觉得不满足,为什么呢?

1.用photoshop制作的动画,制作过程比较长,要产出一个比较理想、细腻的动画图片,花费的时间比较长,一旦需要修改某个部分,就得对源文件大开刀,伤身费脑力。

2.用flash制作动画,比用photoshop来得更专业一些,也高效许多,但文件一般都比较大,小流量、小存储的空间伤不起啊!

3.用javascript实现动态,这是个很实用、也很灵活的方法,大部分网站目前实现的动态效果超过30%使用javascript实现,而且比上述两者有更强的交互性,但在比较渣的网速下,运行js,会拖慢网站的加载速度(这也算缺点咩?)。

从本质上来说,其实碎碎念这么说纯属胡说,动态图片是网站素材,而动态效果属于网站交互,这尼玛能混为一谈么!!??(额,专业人士来科普下吧,碎碎念编不下去了,呵呵呵呵呵呵呵~~)

好啦,以上纯属瞎编乱造,下面开始主菜,额,主题!本文适用于小白级别和不折腾不死星人,大神及代码恐惧症的,可以绕行啦~

用CSS3实现动态效果,只需要在你指定的div/section/aside等等块元素添加class,编写样式即可轻松实现,不占内存、不影响网站加载,修改灵活,还可多个场景共同使用!

提一下动态实现的过程吧:设定动画animation效果名为doudong(改变角度),完成一次动画的时间为0.1s,变化次数为无限制次infinite ,就这样,我们完成了对相应木块动态效果的定义!为了达到动画循环和过渡自然,我们已经定义了一个无穷次变化,接下来还需要定义一个逆向变化,让动画可以反复变化,我们定义-webkit-animation-direction:alternate;这个是针对谷歌浏览器chrome来定义的,后续代码也是仅添加chrome兼容,firefox/opera的兼容代码就自己去拓展吧,多写一个,很简单的,对吧!

接下来,我们要对动画效果的具体实现进行描述,通过@keyframes doudong{}来声明动画的具体内容。我们细分了动画的过程从0%——100%为四段,五个节点,定义加载到这五个节点相应的样式即可实现。

这里的例子,通过定义背景的位置来实现抖动,注意,这里定义的样式是对称的,50%的前后是对称的,因为我们的动画是循环的,这样可以保证过渡的自然和效果的流畅。另外,实现动画的对象最好放置在一个DIV/SECTION或者其它标签的容器内,避免动画对象满屏跑。

代码如下

复制代码

/*左右抖动*/

.doudong{

/*变化一个周期5秒,变化次数infinite无穷次*/

animation:doudong .1s infinite;

-webkit-animation:doudong .1s infinite; /* Safari and Chrome */

/*设置变化逆向alternate*/

-webkit-animation-direction:alternate;

}

@keyframes doudong /**/

{

0% {background-position:3px 0px;}

25%{background-position:1.5px 0;}

50% {background-position:0px 0;}

75%{background-position:-1.5px 0;}

100% {background-position:-3px 0px;}

}

@-webkit-keyframes doudong /* chrome */

{

0% {background-position:3px 0px;}

25%{background-position:1.5px 0;}

50% {background-position:0px 0;}

75%{background-position:-1.5px 0;}

100% {background-position:-3px 0px;}

}

接下来,我们通过一个简单的示例来看看CSS3的动画魅力吧(用鼠标停留在碎碎念网站的导航条logo可以查看效果哦!):

碎碎念费这么多口水,只讲这么点例子,希望可以起个抛砖引玉的效果,让大神们多科普科普CSS3的妙用,让未来的网站更具有高兼容性和轻量级!

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...