CSS3动画在Style里面就实现了以往我们用JQ写的动画效果，着实简便了不少~

简单Demo：

html代码:

<div id="dv1"></div>

CSS3代码:

<style type="text/css">

#dv1{width:100px;height:100px;border:1px solid blue;-webkit-animation:myfirst 3s;position:relative;}

@webkit-keyframes{

0%{left:0px;top:0px;}

25%{left:200px;top:0px;}

50%{left:200px;top:200px;}

75%{left:0px;top:200px;}

100%{left:0px;top:0px;}

}

</style>

--------------------下面演示一个让圆持续旋转的Demo

代码如下:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

    #dv1{

        width:100px;height:100px;border:100px solid green;

         border-left-color:yellow;border-top-color:red;border-bottom-color:blue;

         border-radius:%;

         -webkit-animation:myAnimation 3s infinite linear;

    }

    @-webkit-keyframes myAnimation{

        %{transform:rotate(0deg);}

        %{transform:rotate(360deg);}

    }

    </style>

</head>

<body>

<div id="dv1"></div>

</body>

</html>

CSS3——动画效果的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  3. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  4. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  5. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 第八十三节，CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介     CSS3提 ...

  7. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  8. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  9. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  10. 第 26 章 CSS3 动画效果

    学习要点: 1.动画简介 2.属性详解 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一．动画简介 CSS ...

随机推荐

  1. ls文件与目录检视,文件内容查阅

    -a 列出所有的(含隐藏的)文件,包括.和.. -A 列出所有的(含隐藏的)文件,不包括.和.. -d 仅列出目录本身,而不是列出目录内的文件数据(常用) -f 不进行排序,直接列出结果,ls默认会以 ...

  2. 标准C IO函数和 内核IO函数 效率（时间）比较

    前言 标准C提供的文件相关的IO函数,除标准错误输出是不带缓冲的(可以尽快的将错误消息显示出来)之外,所有与终端相关的都是行缓冲,其余都是全缓冲的. 我们可以使用setbuf,setvbuf改变指定流 ...

  3. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  4. UESTC 1014 Shot

    这题刚开始没想通,结果发现要解方程,代码如下: #include<iostream> #include<cstdio> #include<cmath> #inclu ...

  5. 真人动作捕捉系统 for Unity

    真人动作捕捉 在Asset Store中浏览Mecanim相关的资源时,发现了这个 资源信息 Asset Store:https://www.assetstore.unity3d.com/#/cont ...

  6. Windows系统安装Oracle 11g数据库

    一.下载 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html以下两网址来源此官方下载页 ...

  7. [转] Linux下防火墙iptables用法规则详及其防火墙配置

    from: http://www.cnblogs.com/yi-meng/p/3213925.html 备注: 排版还不错,建议看以上的链接. iptables规则 规则--顾名思义就是规矩和原则,和 ...

  8. 安装grunt

    1,npm install -g grunt-cli 2,npm install grunt --save 作为项目的依赖安装 这两步必不可少

  9. Gitblit-Git版本服务器环境部署

    Gitblit介绍 Gitblit 是一个纯 Java 库用来管理.查看和处理 Git 资料库.相当于 Git 的 Java 管理工具,支持linux系统. Git是分布式版本控制系统,它强调速度.数 ...

  10. WinForm 快捷键设置

    一.窗体快捷键,只在窗体上有效果 首先在form_load的时候写上this.KeyPreview=true;//表示窗体接受按键事件 然后如下 private void Frm_KeyDown(ob ...