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. gnuplot 学习笔记

    1 如何运行 gnuplot是一个命令行输入的工具,把命令行写入一个文本file1 file2.使用下列方式运行. gnuplot {option} file1 file2 2 产生一个图标,不管数据 ...

  2. shell script 学习笔记-----标准输出

    1.将标准输出(stdout)和标准错误输出(stderr)分别重定向到两个不同的文件 其中符号'>'默认将标准输出重定向,意思和'1>'相同,‘2>'表示重定向标准错误输出,数字1 ...

  3. 分享一个解决MySQL写入中文乱码的方法

    分享一个解决MySQL写入中文乱码的方法 之前有发帖请教过如何解决MySQL写入中文乱码的问题.但没人会,或者是会的人不想回答.搜索网上的答案并尝试很多次无效,所以当时就因为这个乱码问题搁浅了一个软件 ...

  4. UESTC 881 神秘绑架案 --二维DP

    LRJ黑书上的例题. 化简均方差公式: 均值的平方一定,所以只需让矩形的总分的平方和最小即可. 定义:dp[k][x1][y1][x2][y2],以(x1,y1)为左上角坐标,(x2,y2)为右下角坐 ...

  5. Jenkins学习八：Jenkins语言本地化

    在Jenkins中,英语一大片,不懂英语的看着头疼.非常高兴的是,Jenkins作为一个主流流行的持续构建工具,提供了一个本地化语言的配置界面. 你可以找到它,在Jenkins每页的左下角.如下图: ...

  6. python playfair

    #########################Playfair密码######################### #约定1:若明文字母数量为奇数,在明文末尾添加一个'Z' #约定2:'I'作为 ...

  7. C和指针笔记 3.6链接属性

    链接属性决定如何处理在不同文件中出现的标识符.标识符的作用域也它的链接属性有关,但这两个属性并不相同. 没有链接属性的标识符(none)总是被当作单独的个体,也就是说该标识符的多个声明被当作独立不同的 ...

  8. C# Thread.Join()用法的理解 转

    指在一线程里面调用另一线程join方法时,表示将本线程阻塞直至另一线程终止时再执行 比如 1using System; 2 3namespace TestThreadJoin 4{ 5 class P ...

  9. WPF - MVVM - 如何将ComboBox的Selectchange事件binding到ViewModel

    转:http://www.cnblogs.com/mantian/p/3713524.html 将所有的事件,属性,都映射到ViewModel中.好处多多,以后开发尽量用这种模式. 解决方法: 使用S ...

  10. Linux网络共享管理(ssh,nfs,samba)

    OpenSSH服务器: ssh协议:提供安全的ssh环境用于远程管理,默认端口:22: 服务名称:sshd openssh-server包的安装文件: 使用ssh客户端程序: 连接目标主机: ssh ...