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

分享两个小动画

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>C3动画</title>

  <style>

    /*****************/

    #d1{width:50px;height:50px;background-color:green;float:left;

        border-radius:50%;}

    #d2{width:50px;height:50px;background-color:red;float:left;

        border-radius:50%;position:relative;}

    @-webkit-keyframes jump{

    0%{transform:rotate(0deg);opacity:1;}

    25%{transform:rotate(-10deg);opacity:0.5;}

    50%{transform:rotate(0deg);opacity:1;}

    75%{transform:rotate(10deg);opacity:0.5;}

    100%{transform:rotate(0deg);opacity:1;}

    }

    #d1{-webkit-animation:jump 0.3s linear infinite;}

    @-webkit-keyframes move{

        0%{left:10px;background-color:blue;}

        50%{left:800px;background-color:yellow;}

        100%{left:10px;background-color:red;}

    }

    #d2{-webkit-animation:move 5s linear infinite;}

  </style>

 </head>

 <body>

    <div id="d1"></div>

    <div id="d2"></div>

 </body>

</html>

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

需要注意的是：

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为无限次数循环。

CSS3简单动画的更多相关文章

  1. H5+CSS3简单动画 知识点 汇总

    乱入几个:  1.h5的一个语义化标签   figure :用于规定独立的流内容(图像 图表 照片 代码等)   figcapition:与figure配套使用,用于标签定义figure元素标题 2. ...

  2. css3 简单动画

    <script> <!-- var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementB ...

  3. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  4. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  5. css3简单介绍

    关于css3我先介绍几个简单的选择器: 先进行设置: 字符串匹配属性选择器: E[alt^="a"]  选择属性中以a开头的元素: E[alt$="a"]  选 ...

  6. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  7. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  8. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  9. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

随机推荐

  1. windows phone 存储图片 数据库写法

    byte[] _DiseaseImage; [Column(DbType = "Image", UpdateCheck = UpdateCheck.Never)] //保证图像超出 ...

  2. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  3. SQL Server逻辑读、预读和物理读

    SQL Server数据存储的形式 预读:用估计信息,去硬盘读取数据到缓存.预读100次,也就是估计将要从硬盘中读取了100页数据到缓存. 物理读:查询计划生成好以后,如果缓存缺少所需要的数据,让缓存 ...

  4. 年度榜单：2013年最佳免费 PSD 设计素材揭晓

    <年度榜单>系列继续给大家带来2013年度发布的好东西,这篇文章要给大家分享的是本年度最佳的12套精美的 PSD 设计素材,你可以免费下载使用.这些免费素材不仅能帮助他们节省大量的时间,而 ...

  5. 基于HT的CSG功能构建HTML5的3D书架

    构造实体几何CSG全称Constructive solid geometry,是3D计算机图形学中构建模型的常用技术,可通过合并Union.相减Subtraction和相交Intersction的三种 ...

  6. [转]virtualenv建立多个Python独立开发环境

    不同的人喜欢用不同的方式建立各自的开发环境,但在几乎所有的编程社区,总有一个(或一个以上)开发环境让人更容易接受. 使用不同的开发环境虽然没有什么错误,但有些环境设置更容易进行便利的测试,并做一些重复 ...

  7. log4net 既要按日期分割日志文件，又要按文件大小分割。

    <appender name="DebugAppender" type="log4net.Appender.RollingFileAppender"> ...

  8. asp.net中Ajax控件的用途（一）

    1,UpdatePanel控件,用户更新部分内容,示例 放入一个Label和一个Button,单击按钮,label显示当前时间. 2,ScriptManagerProxy控件,每个页面只能有一个Scr ...

  9. Bootstrap学习笔记系列2-------Bootstrap简单表格处理

    标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行 ...

  10. 如何在WinForm中发送HTTP请求

    如何在WinForm中请求发送HTTP 手工发送HTTP请求主要是调用 System.Net的HttpWebResponse方法 手工发送HTTP的GET请 求: string strURL = &q ...