主体只有一个div

<body>

    <div></div>

</body>

样式部分(测试:目前的浏览器还是需要加前缀才能兼容)

<style>

    * {

        margin: 0;

        padding: 0;

    }

    div {

        position: absolute;

        top: 0;

        left: 0;

        width: 100px;

        height: 100px;

        border-radius: 50px;

        border: 2px solid red;

        background: -webkit-radial-gradient(80px 80px, circle, #fff, #00f);

        background: -ms-radial-gradient(80px 80px, circle, #fff, #00f);

        /* 动画名字 */

        animation-name: move;

        /* 动画时间 */

        animation-duration: 3s;

        /* 动画的类型 */

        animation-timing-function: linear;

        /* 动画播放次数 */

        animation-iteration-count: infinite;

        /* 动画是否允许反向 */

        animation-direction: normal;

        /* 简写为 animation: move 2s linear 0s infinite normal;*/

    }

    @keyframes move {

        0% {

            left: 0px;

            top: 0px;

        }

        25% {

            left: 150px;

            top: 150px;

        }

        50% {

            left: 300px;

            top: 300px;

        }

        75% {

            left: 450px;

            top: 450px;

        }

        100% {

            left: 600px;

            top: 600px;

        }

    }

    </style>

如有不足之处,请广提意见,诚恳学习.

css动画属性--小球移动的更多相关文章

  1. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  2. CSS动画属性性能详细介绍

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...

  3. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  4. js监听指定元素的css动画属性

    MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...

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

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

  6. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  7. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  9. 容易忘记的css属性和动画属性

    动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...

随机推荐

  1. 【Spark2.0源码学习】-10.Task执行与回馈

         通过上一节内容,DriverEndpoint最终生成多个可执行的TaskDescription对象,并向各个ExecutorEndpoint发送LaunchTask指令,本节内容将关注Exe ...

  2. FPGA设计思想（持续更新）

    一. 流水线设计 将原本一个时钟周期完成的较大的组合逻辑通过合理的切割后分由多个时钟周期完成.该部分逻辑运行的时钟频率会有明显对的提升,提高系统的性能用面积换速度 一个流水线设计需要4个步骤完成一个数 ...

  3. backbone中get和fetch的区别

    我也是刚开始接触backbone.js对于里面的很多东西都看过,但是具体在使用起来还是有很多问题,其中一个就是get和fetch的区别,这个让我很纠结,都是获取模型的数据,干嘛要有两个呢?最近好像弄明 ...

  4. 详解python之反射机制

    一.前言 def f1(): print('f1') def f2(): print('f2') def f3(): print('f3') def f4(): print('f4') a = 1 t ...

  5. asp.net core 教程（六）-中间件

    Asp.Net Core-中间件 在这一章,我们将了解如何设置中间件.中间件技术在 ASP.NET Core中控制我们的应用程序如何响应 HTTP 请求.它还可以控制应用程序的异常错误,这是一个在如何 ...

  6. if中可以使用那些作为判断条件呢？

    在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢 ? 1 2 3 4 5 6 7 8 ...

  7. 通过LOGBACK实现每个类、包或自定义级别

    项实现LOGBACK对每个包或者类或者通过自定义级别的方式实现自定义输出的日志进入制定的文件.查阅了很多资料,都没有找到行之有效的解决方案,直到看到了这篇文章http://www.360doc.com ...

  8. java hascode

    有部分代码如下: Cat cat=new Cat("Kitty",2);system.out.println(cat):问题:输出什么? 调用并执行toString()方法,两种情 ...

  9. Mac, Linux中配置Latex中文字体

    对于中文的latex文档,在Linux下一般可以使用系统自带的开源字体:文泉驿(WenQuanYi)来实现,即如下的最小例子,通过xelatex命令来编译即可生成中文文档. \documentclas ...

  10. jQuery星级评分插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Con ...