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. 常用的Linux可插拔认证模块（PAM）应用举例(一)

    pam_access.so模块 pam_access.so模块主要的功能和作用是根据主机名(包括普通主机名或者FQDN).IP地址和用户实现全面的访问控制.pam_access.so模块的具体工作行为 ...

  2. redis master配置了密码进行主从同步

    1.如果master不设置密码,那么直接在slave服务器配置slaveof即可 配置如下 #slaveof ip 端口 slaveof 配置好我们看下redis的日志 看是否同步成功 :S Jan ...

  3. Oracle 性能维护一点

    大数据量表的维护原则 1.如果此表经常CRUD,最好的办法是定期收集统计信息传递给oracle优化器,提高性能.例如dbms_stats.gather_table_stats命令. 可以做在ETL中, ...

  4. 【转载】jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法

    文章1:http://yangzhihuan.iteye.com/blog/717254 CKEDITOR.instances["page_content"].on("i ...

  5. 边工作边刷题：70天一遍leetcode: day 84-3

    Meeting Rooms I/II 要点:这题和skyline类似,利用了interval start有序的特点,从左向右处理,用一个heap来动态表示当前占用rooms的时间段,所以heap的si ...

  6. python中thread模块中join函数

    http://www.cnblogs.com/vingi/articles/2657790.html for i in range(10): t = ThreadTest(i) thread_arr. ...

  7. react webpack.config.js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  8. C# Process执行bat

    Process类 System.Diagnostics 命名空间提供类,使您能够与系统进程.事件日志和性能计数器进行交互. Process类提供对本地和远程进程的访问并使您能够启动和停止本地系统进程. ...

  9. flex+AS3编程规范

    flex+AS3编程规范 Flex+AS3编码规范 http://www.cnblogs.com/jiahuafu/   1.  缩写: 尽量避免使用缩写,使用缩写时尽量和Flex保持一致.但要记住一 ...

  10. phpmyadmin后台拿shell方法总结

    方法一: CREATE TABLE `mysql`.`xiaoma` (`xiaoma1` TEXT NOT NULL ); INSERT INTO `mysql`.`xiaoma` (`xiaoma ...