css3做圆形轨迹移动动画

原创 2016年09月30日 14:19:44
<!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中如何使元素曲线运动

问题?CSS3中如何使元素曲线运动 原理:因为在css属性中是没有曲线运动的属性,我们就需要用到一个jquery插件jquery.path.js 下载:点击打开下载链接 例子:在观望中有...
  • Mr_li13
  • Mr_li13
  • 2016年02月26日 16:03
  • 3707

CSS3动画-抛物线运动

CSS3动画之抛物线今天来说下CSS3动画,目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation,transform,@keyframes,transition等。 GPU硬件加速...
  • boycycyzero
  • boycycyzero
  • 2015年03月05日 23:26
  • 7003

Cocos2d-JS动画

与动作密不可分的还有动画,动画又可以分为场景过渡动画和帧动画。场景过渡动画我们在以往介绍过,这一个我们只介绍帧动画。帧动画帧动画就是按一定时间间隔、一定的顺序、一帧一帧地显示帧图片。我们的美工要为精灵...
  • tonny_guan
  • tonny_guan
  • 2015年03月30日 10:49
  • 12569

贝塞尔曲线的解读,可以用于弧形移动动画

关于贝塞尔曲线,就我目前所知的应用场景主要还是View的弧线运动上的运用 说道贝塞尔曲线,那么我们得知道贝塞尔曲线的公式 一次方公式,两点之间的: 动态效果为: 二次方公式,三点之间的 动...
  • YANGDAHUAN
  • YANGDAHUAN
  • 2016年08月10日 20:04
  • 1121

css3实现圆形进度加载动画

使用到的css3属性有border-radius,transform,animation,clip等,在这里着重讲一下clip这个属性。因为博主也是第一次用这个属性。。。 这个属性就是规定盒子内显示的...
  • qq_30100043
  • qq_30100043
  • 2017年07月18日 16:01
  • 1106

Android 动画--使用Path来规划动画的轨迹

使用Path来规划动画的轨迹 public void testPathAnimator(){ final FrameLayout l = (FrameLayout) findVi...
  • heqiangflytosky
  • heqiangflytosky
  • 2016年07月11日 10:35
  • 5522

ANDROID实现圆形图形不断旋转的动画

xml version="1.0" encoding="utf-8"?> set xmlns:android="http://schemas.android.com/apk/res/android" ...
  • tianxiangshan
  • tianxiangshan
  • 2012年08月01日 09:05
  • 6546

自定义控件-绕着圆形轨迹旋转的小球

一. 概述用过华为手机的人应该知道华为手机系统应用中的加载动画是一个小球绕着圆圈旋转,之前有一个项目用过类似的功能,所以写了一个自定义的控件,记录一下。希望能给需要这个功能的同志们提供一些思路。先上效...
  • xingxing_yan
  • xingxing_yan
  • 2017年01月25日 16:16
  • 2512

css画圆, 如何用纯css实现一个动态画圆环效果

实现的思路就是通过css3的transform进行元素旋转, 用到的知识点 1. 如何画一个圆环 2. 如何画一个半圆 3. 元素旋转 4. 定位 废话不多说,直接上代码 动态画一个圆环...
  • xuyunfei_2012
  • xuyunfei_2012
  • 2016年12月15日 17:17
  • 6988

loading等待载入正在加载的动画GIF图片圆形图标

loading等待载入正在加载的动画GIF图片圆形图标
  • love_xiolan
  • love_xiolan
  • 2016年08月31日 11:36
  • 8806
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3做圆形轨迹移动动画
举报原因:
原因补充:

(最多只允许输入30个字)