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动画之抛物线今天来说下CSS3动画,目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation,transform,@keyframes,transition等。 GPU硬件加速...

圆点围绕圆旋转---css3

Document *{ margin: 0; padding: 0; } .box{ position: relative; width: 300px; ...
  • zx_p24
  • zx_p24
  • 2017年08月23日 15:19
  • 217

纯CSS打造边框亮点移动效果

纯CSS打造边框亮点移动效果在足球和篮球比赛的电视转播中,记分版在刚弹出时,通常会在左下角和右上角出现两个亮点,并沿着记分版边缘移动一段距离,最后消失。这种动画效果可以帮助观众更加关注相对单调的记分版...

简单的实现一下自定义圆然后平移的小动画

//首先在布局当中加入你所创建的Circle类的控件 //下面的Circle是你自己的类 demo01.com.xiaoyuandian.Circle android:id="@+id...

java实现类的封装(物体实现椭圆运动)

1.整体的结构图: 2.编写GameUtil.java的代码: package cn.bjsxt.test; import java.awt.Image; import java.awt.im...

CSS3 动画配合clip属性创建圆形进度条动画

这里先讲下clip这个css中很少用到的样式,在w3chool是这样描述的 clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢?”clip” 属性允许您规定一个元...
  • Toxic07
  • Toxic07
  • 2015年07月16日 14:32
  • 1729

用js编写的一个小方格随椭圆曲线运动的特效例子,非常精典,运行看看吧。。

椭圆曲线 *{ margin:0px;padding:0px; } div{ border:1px solid #111; } .points{ width:1px;heig...
  • nigind
  • nigind
  • 2014年02月17日 11:53
  • 1073

JS画椭圆

*{ margin:0; padding:0; } .ab{ width:1px; ...

html5 canvas 实现小球绕椭圆旋转

测试 var ball_count = 10;//小球的个数 var circle_x = 0;//圆心的X坐标 var circl...

ES6的新特性

JavaScript社区中的每个人都喜欢新API、新语法和新特性——可以更优雅,更智能,更有效的完成重要任务。ES6带来了很多好东西,并且在过去的一年里,浏览器厂商们全力以赴的升级浏览器来使它们可用。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3做圆形轨迹移动动画
举报原因:
原因补充:

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