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