纯css3编写的小球在固定区域碰撞css3特效-web开发
摘要：本页面向大家展开了各种漂亮的网页小球碰撞，而且不用一张图片就实现了各种效果,适合不同的场合使用。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>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢