<!doctype html> 
    <html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <title> css3圆形轨迹动画 </title> 
    <style type="text/css"> 
    @keyframes animX{ 
          0% {left: 0px;} 
        100% {left: 500px;} 
    } 
    @keyframes animY{ 
          0% {top: 0px;} 
        100% {top: 500px;} 
    } 
     
    #ball { 
        width: 20px; 
        height: 20px; 
        background-color: #f66; 
        border-radius: 50%; 
        position: absolute; 
        animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate; 
    } 
     
    #lopp { 
        width: 498px; 
        height: 498px; 
        border: 2px solid #999; 
        border-radius: 50%; 
        position: absolute; 
        left: 9px; 
        top: 9px; 
    } 
     
    </style> 
    </head> 
    <body> 
    <div id="lopp"></div> 
    <div id="ball"></div> 
    </body> 
    </html>

css3圆形轨迹动画的更多相关文章

  1. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. 15个超强悍的CSS3圆盘时钟动画赏析

    在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...

  4. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  5. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  6. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下，另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...

  7. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  8. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  9. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

随机推荐

  1. 个人整理的一些iOS Entitlements

    收集了不少Entitlement,当然也肯定有遗漏.有的就是key的字面意思,就不多做解释.不过有的虽然字面意思好理解,不过具体的用处不太清楚,就写的Unknown use.在替换entitlemen ...

  2. Tempdb--临时对象缓存

    SQL Server删除一个临时对象时,不移除该对象的条目,当再次使用时,就无须重新创建临时对象,SQL Server为临时对象缓存一个数据页和一个IAM页,并回收剩余页,如果临时表的大小超过8MB, ...

  3. xml与json的区别和总结

    JSON和XML的比较 ◆可读性 JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负. ◆可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML ...

  4. JAVA 字符串编码转换

    /** * 字符串编码转换的实现方法 * @param str 待转换编码的字符串 * @param newCharset 目标编码 * @return * @throws UnsupportedEn ...

  5. NPOI+Json文件解析Excel

    记点笔记,加深印象!最近有个导入Excel工能需要完成,Excel列名是中文的,导入Excel我用的NPOI插件,如果不对Excel做解析,列名有可能会给我带来一些字符方面的麻烦,于是想到了一个比较l ...

  6. SUBSET

    DESCRIPTION:一开始你有一个空集,集合可以出现重复元素,然后有Q 个操作1. add s在集合中加入数字s.2. del s在集合中删除数字s.保证s 存在3. cnt s查询满足a& ...

  7. java学习笔记—JDBC1（16）

    1.数据持久化 l  持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用,也称为“固化”.在大多数情况下,服务器或客户端应用中数据的持久化是通过关系型数据库来实现 l  存储 ...

  8. 【timeisprecious】【JavaScript 】JavaScript String 对象

    JavaScript>String 对象 1 .From Runnob JavaScript String 对象(概览) JavaScript String 对象(教程)

  9. jmeter—解决响应乱码问题

    问题:    当响应数据或响应页面没有设置编码时,jmeter会按照jmeter.properties文件中,sampleresult.default.encoding 设置的格式解析默认ISO-88 ...

  10. gradle 常用命令参数

    参考文档 https://docs.gradle.org/current/userguide/userguide gradle -q 任务名(task ) 执行指定某一个task gradle -q ...