jGravity实现物体模拟自由下落物理碰撞拖拽效果代码
代码语言:html
所属分类:其他
代码描述:jGravity实现物体模拟自由下落物理碰撞拖拽效果代码
代码标签: jGravity 物体 模拟 自由 下落 物理 碰撞 拖拽
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
* {
margin: 0;
padding: 0
}
html {
background: #69f;
position: relative
}
body {
font: 14px/1.3 'Segoe UI',Arial,sans-serif;
height: 100%;
overflow: hidden;
padding-bottom: 10px
}
a,a:visited {
text-decoration: none;
outline: 0;
color: #54a6de
}
a:hover {
text-decoration: underline
}
section,footer,nav {
display: block
}
img {
border: 0
}
h1 {
font: 36px 'Cookie',cursive;
color: white;
width: 210px;
margin: 20px auto 50px;
white-space: nowrap;
text-align: center
}
#gallery {
width: 300px;
height: 340px;
overflow: hidden;
margin: 0 auto
}
#gallery li {
list-style: none;
float: left
}
#gallery a img {
display: block;
width: 60px;
height: 60px
}
#gravityButton {
display: block;
background: #8728d3;
background: -moz-linear-gradient(top,#8728d3 0,#461474 100%);
background: -webkit-linear-gradient(top,#8728d3 0,#461474 100%);
background: -o-linear-gradient(top,#8728d3 0,#461474 100%);
background: linear-gradient(to bottom,#8728d3 0,#461474 100%);
color: #fff;
font: 22px 'Cookie',cursive;
text-align: center;
margin: 25px auto 50px;
width: 120px;
border-radius: 3px;
padding: 10px;
text-decoration: none!important;
box-shadow: 0 0 1px rgba(255,255,255,0.3) inset,0 1px 0 rgba(255,255,255,0.3) inset;
text-shadow: 1px 1px 0 rgba(40,40,40,0.6);
opacity: .9
}
#gravityButton:hover {
opacity: 1
}
.box2d a {
cursor: move
}
footer {
background-color: #111;
bottom: 0;
box-shadow: 0 -1px 2px #111;
height: 45px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000
}
footer h2 {
color: #EEE;
font-size: 14px;
font-weight: normal;
left:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0