如何利用CSS3动画实现圆圈由小变大向外扩散的效果

这篇文章将为大家详细讲解有关如何利用CSS3动画实现圆圈由小变大向外扩散的效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联是专业的环翠网站建设公司,环翠接单;提供成都做网站、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行环翠网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

css3中新增了一个animation的属性,该属性类似于创建一个animation对象

如:animation: bounce 2.0s infinite ease-in-out;

animation有以下几个参数:

属性描述CSS
animation所有动画属性的简写属性,除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3
animation-fill-mode规定对象动画时间之外的状态。3

CSS 3 中2D转换的实现用到两个属性:

属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin指定变换的基点的位置。3

静态效果图:

如何利用CSS3动画实现圆圈由小变大向外扩散的效果

具体如代码所示:





无标题文档

 

 


    
    

关于“如何利用CSS3动画实现圆圈由小变大向外扩散的效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


新闻名称:如何利用CSS3动画实现圆圈由小变大向外扩散的效果
网站网址:http://myzitong.com/article/pjcips.html

其他资讯