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. JSP网站开发基础总结《十四》

    对于JSP的知识总结,已经为大家分享的差不多了,本篇就为大家做一下最后总结,本篇总结的主题是文件上传和下载,在之前的随笔中也有为大家分享过文件上传和下载的知识,不过都是通过JAVA提供的上传下载类实现 ...

  2. Android开发之注册登录

    昨天给大家介绍了一下关于Android端向服务器端发送数据的方法,不过貌似有一点瑕疵,今天经过调试已经解决,在这里给大家介绍一下 貌似Android4.0以后版本的对于网络权限要求变得严格,导致昨天编 ...

  3. 2014牡丹江网络赛ZOJPretty Poem（暴力枚举）

    /* 将给定的一个字符串分解成ABABA 或者 ABABCAB的形式! 思路:暴力枚举A, B, C串! */ 1 #include<iostream> #include<cstri ...

  4. 只用一行代码让你的ASP.NET MVC 跑起来

    只用一行代码让你的ASP.NET MVC 跑起来 MVC框架一直是企业开发绕不过去的东西,先是JavaEE的 Structs, 然后是 Spring MVC, 再到我们今天要讨论的ASP.NET MV ...

  5. nginx常见内部参数，错误总结

    1.日志简介 nginx日志主要有两种:访问日志和错误日志.访问日志主要记录客户端访问nginx的每一个请求,格式可以自定义:错误日志主要记录客户端访问nginx出错时的日志,格式不支持自定义.两种日 ...

  6. 用Latex写学术论文： IEEE Latex模板和文档设置(\documentclass)

    1.可以在博客园中使用latex代码输出公式,以后再以不用复制图片粘贴啦: http://www.cnblogs.com/cmt/p/3279312.html 例如以下代码两边加上 $ 符号后 x(k ...

  7. HT for Web的HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  8. Winform应用程序实现通用遮罩层

    在WEB上,我们在需要进行大数据或复杂逻辑处理时,由于耗时较长,一般我们会在处理过程中的页面上显示一个半透明的遮罩层,上面放个图标或提示:正在处理中...等字样,这样用户体验就比较好了,然而如果在Wi ...

  9. .NET Core中使用Razor模板引擎

    一.简介 在MVC以外的场景中,我们往往需要完成一些模板引擎生成代码或页面的工作:在以前我们一般常用的有Razor.NVeocity.VTemplate.虽然所有的模板系统都具有一些共同特征,但 Ra ...

  10. Linq查询操作之排序操作

    在Linq中排序操作可以按照一个或多个关键字对序列进行排序.其中第一个排序关键字为主要关键字,第二个排序关键字为次要关键字.Linq排序操作共包含以下5个基本的操作. 1.OrderBy操作,根据排序 ...