<!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. Unity&C# SingerMonoManager泛型单例

    管理各种管理器 ///为什么需要单例 ///单例模式核心在于对于某个单例类,在系统中同时只存在唯一一个实例,并且该实例容易被外界所访问: ///避免创建过多的对象,意味着在内存中,只存在一个实例,减少 ...

  2. ASP.NET 页面执行顺序详解

    今天整理了一下ASP执行过程,从.net页码的执行周期开始做一个详细的了解.我重写了页面的绝大多数方法.然后加载执行.所得的顺序如下. 方法是每个重写的事件中都输出一个字符,按字符打印出来的先后判断事 ...

  3. c# 生成二维码图片

    转载自:https://blog.csdn.net/hyunbar/article/details/78271778 1.在C#中直接引用ThoughtWorks.QRCode.dll 类 2.封装方 ...

  4. dockerfile 构建tomcat

    事先下载好tomcat和jdk的二进制包. 下载地址https://pan.baidu.com/s/1kWWHGEV 值得一说的是 tomcat的官方镜像 剪切了很多jdk和系统命令,所以生产环境建议 ...

  5. 开源NFV管理器 - OpenStack Tacker介绍 NFV和Tacker介绍和主要功能

    原文链接:https://blog.csdn.net/bc_vnetwork/article/details/51463518 1.NFV概述 NFV(网络功能虚拟化Network Function ...

  6. python网络编程--TCP连接的三次握手(三报文握手)与四次挥手

    一.TCP连接 运输连接有三个阶段: 连接建立.数据传送和连接释放. 在TCP连接建立过程中要解决以下三个问题: 1,要使每一方能够确知对方的存在. 2.要允许双方协商一些参数(如最大窗口之,是否使用 ...

  7. PAT乙级1091-1095

    1091 N-自守数 (15 分) 如果某个数 K 的平方乘以 N 以后,结果的末尾几位数等于 K,那么就称这个数为“N-自守数”.例如 3,而 2 的末尾两位正好是 9,所以 9 是一个 3-自守数 ...

  8. Codechef：Fibonacci Number/FN（二次剩余+bsgs）

    题面 传送门 前置芝士 \(bsgs\),\(Cipolla\) 题解 因为题目保证\(p\bmod 10\)是完全平方数,也就是说\(p\bmod 5\)等于\(1\)或\(-1\),即\(5\)是 ...

  9. robot framework-tags(标签)实例

    robot framework的标签是一个简单而又强大的分类机制,功能如下: 标签在reports,logs以及测试数据中展示,显示关于测试用例的元数据信息 用例的执行统计(total,passed, ...

  10. [ActionScript 3.0] 通过as3操作web内容

    package com.controls.utils { import flash.net.*; import flash.utils.ByteArray; import flash.external ...