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. 二分查找java代码

    public int find(long searchKey){ int i; int begin = 0; int end = nElems - 1; while(true){ i = (begin ...

  2. 编译原理：正规式转变成DFA算法

    //将正规式转变成NFApackage hjzgg.formal_ceremony_to_dfa; import java.util.ArrayList; class Edge{ public int ...

  3. Oracle循环语句

    PL/SQL有四种类型的循环:简单循环.WHILE循环.FOR循环以及游标FOR循环.在这里我们主要讨论前三种,除此之外,还将讨论Oracle 11g中新引入的CONTINUE语句. 一. 简单循环 ...

  4. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  5. REST API出错响应的设计

    REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...

  6. js IndexedDB：浏览器端数据库的demo实例

    IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...

  7. c语言读取字符在记事本中出现次数

    程序使用说明: 此程序可以统计出名称为1.txt的文件中/出现的次数 但是仅支持单个英文字母和标点符号查询,不支持汉字. 在本程序生成的exe根目录下放一个1.txt, 即可查询出该字符在1.txt记 ...

  8. WPF The Hard Way

    WPF The Hard Way Windows Presentation Foundation (WPF) 是微软下一代显示系统,用于生成能带给用户震撼视觉体验的 Windows 客户端应用程序.  ...

  9. oracle创建表相关

    --创建表 create table person( id number primary key, name ), birth date ); --创建序列 create sequence perso ...

  10. Go语言接口

    接口是面向对象的必备属性之一,即便是像C语言这种面向过程的语言也可以通过指向函数的指针来实现接口.我们熟知的面向对象语言中更是少不了接口.最近闲了下来,又可以开始学习Go语言了,发现Go语言的接口吸收 ...