博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3简单动画
阅读量:7001 次
发布时间:2019-06-27

本文共 646 字,大约阅读时间需要 2 分钟。

css3的动画确实非常绚丽!浏览器兼容性很重要!。

分享两个小动画

   
C3动画

效果如本博客首页那两个小圆圈!

需要注意的是:

1、在css里创建动画时候要处理兼容性

2、在调用的时候不单要处理兼容性> -webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ; 

还要注意animation:animation-name,animation-duration,animation-timing-function,animation-iteration-count

  animation-name:是用来定义一个动画的名称

  animation-duration是用来指定元素播放动画所持续的时间长,取值:为数值,单位为s (秒.)其默认值为“0”。

  animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式.

    具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic- bezier。就是播放速度~

  animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值为数字,其默认值为“1”;infinite为无限次数循环。

转载地址:http://nigvl.baihongyu.com/

你可能感兴趣的文章
Appium 一个测试套件多次启动android应用
查看>>
[CareerCup] 17.9 Word Frequency in a Book 书中单词频率
查看>>
【Unity】第9章 粒子系统
查看>>
java中Double的isInfinite()和isNaN()
查看>>
(转) 堆和栈的区别
查看>>
常用jQuery代码
查看>>
[转]图片中的字符分割提取(基于opencv)
查看>>
BZOJ4657 : tower
查看>>
JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面...
查看>>
制作Linux下程序安装包——使用脚本打包bin、run等安装包
查看>>
DBCP连接池简介
查看>>
header("Location:login.php")
查看>>
[转] C#操作Excel文件
查看>>
Android学习之路书籍推荐
查看>>
Atittit.研发公司的组织架构与部门架构总结
查看>>
vs2012 提示 未能正确加载 "Visual C++ Language Manager Package" 包 的解决办法
查看>>
概率论与数理统计
查看>>
ArcGIS Engine开发之旅04---ARCGIS接口详细说明
查看>>
[转] python程序的调试方法
查看>>
localStorage与sessionStorage 的区别
查看>>