纯css3编写的小球在固定区域碰撞css3特效-web开发

发表于:2014-07-31 20:27:29 | 阅读数:--次| 作者:小猪仔

摘要：本页面向大家展开了各种漂亮的网页小球碰撞，而且不用一张图片就实现了各种效果,适合不同的场合使用。CSS3技术的确非常强大，不过大家测试的时候不要使用IE8，因为IE8还没有完全支持css3，微软如此不屑CSS3，唉！请使用火狐或Safari或Google Chrome。

		html5代码
	

运行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />

<title>纯css3编写的小球在固定区域碰撞css3特效-web开发</title>
<style type="text/css">
#container,#horizontal,#vertical {
  position: absolute;
  left: 0px;
  top: 0px;
}

#horizontal {
  -webkit-animation: horizontal 0.8s linear 0s infinite alternate;
}

#vertical {
   -webkit-animation: vertical 0.55s ease-in 0s infinite alternate;
}

#ball {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: orange;
}

#container {
  width: 300px;
  height: 240px;
  margin:0 auto;
  outline: 1px solid gray;
}

.main{ width:300px; height:240px; margin:0 auto; position:relative; margin-top:50px;}

@-webkit-keyframes horizontal {
  0% {left: 0px;}
  100% {left: 290px;}
}

@-webkit-keyframes vertical {
  0% {top: 0px;}
  100% {top: 230px;}
}
</style>
</head>

<body>
<div class="main">
	<div id="container">
  		<div id="horizontal">
    		<div id="vertical">
      			<div id="ball"></div>
    		</div>
  		</div>
	</div>
</div>
<p align="center">
	<a href="http://www.webkfa.com/one40.html" target="_blank">更多资料</a>
</p>
</body>
</html>