盒子的重力 - 踏得网

重力、加速度模拟

box,gravity

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1534
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $box = document.getElementById('box');
var $table = document.getElementById('table');

var speed = 1;
var direction = 190;
var move = true;

var left = {x: 0, y: 0, width: 80, height: 600}
var right = {x: 720, y: 0, width: 80, height: 600}
var up = {x: 0, y: 0, width: 640, height: 80}
var bottom = {x: 6, y: 520, width: 640, height: 80}
var box = {x: 100, y: 100, width: 100, height: 100}

function moveBox() {
	setTimeout(function () {

if(direction > 0 && direction < 90){
			$table.setAttribute("class", "up-left");
		}
		if(direction > 90 && direction < 180){
			$table.setAttribute("class", "up-right");
		}
		if(direction > 180 && direction < 270){
			$table.setAttribute("class", "down-right");
		}
		if(direction > 270 && direction < 360){
			$table.setAttribute("class", "down-left");
		}

box.y -= speed * Math.sin(direction * (Math.PI/180));
		box.x -= speed * Math.cos(direction * (Math.PI/180));
     console.log(box.x);

$box.style.top = Math.round(box.y) + "px";
	    $box.style.left = Math.round(box.x) + "px";

speed += 0.3;

collision();
	    if (move) {          
	    	moveBox();            
	    }
	}, 20)
}

function findAngle(a,b,c) {
    var ab = Math.sqrt(Math.pow(b.x-a.x,2)+ Math.pow(b.y-a.y,2));    
    var bc = Math.sqrt(Math.pow(b.x-c.x,2)+ Math.pow(b.y-c.y,2)); 
    var ac = Math.sqrt(Math.pow(c.x-a.x,2)+ Math.pow(c.y-a.y,2));
    var degrees = (Math.acos((bc*bc+ab*ab-ac*ac)/(2*bc*ab))) * (180/Math.PI);
    return degrees;
}

moveBox();

编译

CSS

body {
  background-color: #47c9af;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-family: 'Alfa Slab One', arial;
  -webkit-perspective: 1400px;
  -moz-perspective: 1400px;
  -ms-perspective: 1400px;
  perspective: 1400px; }

#table {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 600px;
  background-color: #eb974e;
  margin: 10px 0 0 -400px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 300ms;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 300ms;
  -ms-transform-style: preserve-3d;
  -ms-transition: all 300ms;
  transform-style: preserve-3d;
  transition: all 300ms; }

#table h2 {
  line-height: 300px;
  color: #fff;
  font-size: 80px;
  text-align: center;
  margin: 0;
  padding: 0; }

#table h3 {
  line-height: 100px;
  color: #fff;
  font-size: 50px;
  text-align: center;
  margin: 0;
  padding: 0; }

#table.up {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateX(10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateX(10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateX(10deg);
  transform-origin: bottom right;
  transform: rotateX(10deg); }

#table.down {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateX(-10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateX(-10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateX(-10deg);
  transform-origin: bottom right;
  transform: rotateX(-10deg); }

#table.left {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateY(-10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateY(-10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateY(-10deg);
  transform-origin: bottom right;
  transform: rotateY(-10deg); }

#table.right {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateY(10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateY(10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateY(10deg);
  transform-origin: bottom right;
  transform: rotateY(10deg); }

#table.down-right {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateY(10deg) rotateX(-10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateY(10deg) rotateX(-10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateY(10deg) rotateX(-10deg);
  transform-origin: bottom right;
  transform: rotateY(10deg) rotateX(-10deg); }

#table.down-left {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateY(-10deg) rotateX(-10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateY(-10deg) rotateX(-10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateY(-10deg) rotateX(-10deg);
  transform-origin: bottom right;
  transform: rotateY(-10deg) rotateX(-10deg); }

#table.up-left {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateY(-10deg) rotateX(10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateY(-10deg) rotateX(10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateY(-10deg) rotateX(10deg);
  transform-origin: bottom right;
  transform: rotateY(-10deg) rotateX(10deg); }

#table.up-right {
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateY(10deg) rotateX(10deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateY(10deg) rotateX(10deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateY(10deg) rotateX(10deg);
  transform-origin: bottom right;
  transform: rotateY(10deg) rotateX(10deg); }

#inner-top-wall {
  position: absolute;
  top: 80px;
  left: 80px;
  width: 640px;
  height: 80px;
  background-color: #d35400;
  -webkit-transform-origin: top center;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: top center;
  -moz-transform: rotateX(90deg);
  -ms-transform-origin: top center;
  -ms-transform: rotateX(90deg);
  transform-origin: top center;
  transform: rotateX(90deg); }

#inner-left-wall {
  position: absolute;
  top: 80px;
  left: 80px;
  width: 80px;
  height: 440px;
  background-color: #d35400;
  -webkit-transform-origin: bottom left;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: bottom left;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: bottom left;
  -ms-transform: rotateY(-90deg);
  transform-origin: bottom left;
  transform: rotateY(-90deg); }

#inner-bottom-wall {
  position: absolute;
  top: 520px;
  left: 80px;
  width: 640px;
  height: 80px;
  background-color: #d35400;
  -webkit-transform-origin: top center;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: top center;
  -moz-transform: rotateX(90deg);
  -ms-transform-origin: top center;
  -ms-transform: rotateX(90deg);
  transform-origin: top center;
  transform: rotateX(90deg); }

#inner-right-wall {
  position: absolute;
  top: 80px;
  left: 720px;
  width: 80px;
  height: 440px;
  background-color: #d35400;
  -webkit-transform-origin: bottom left;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: bottom left;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: bottom left;
  -ms-transform: rotateY(-90deg);
  transform-origin: bottom left;
  transform: rotateY(-90deg); }

#outer-top-wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 80px;
  background-color: #eb974e;
  -webkit-transform-origin: top center;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: top center;
  -moz-transform: rotateX(90deg);
  -ms-transform-origin: top center;
  -ms-transform: rotateX(90deg);
  transform-origin: top center;
  transform: rotateX(90deg); }

#outer-left-wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 600px;
  background-color: #eb974e;
  -webkit-transform-origin: bottom left;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: bottom left;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: bottom left;
  -ms-transform: rotateY(-90deg);
  transform-origin: bottom left;
  transform: rotateY(-90deg); }

#outer-bottom-wall {
  position: absolute;
  top: 600px;
  left: 0;
  width: 800px;
  height: 80px;
  background-color: #eb974e;
  -webkit-transform-origin: top center;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: top center;
  -moz-transform: rotateX(90deg);
  -ms-transform-origin: top center;
  -ms-transform: rotateX(90deg);
  transform-origin: top center;
  transform: rotateX(90deg); }

#outer-right-wall {
  position: absolute;
  top: 0;
  left: 800px;
  width: 80px;
  height: 600px;
  background-color: #eb974e;
  -webkit-transform-origin: bottom left;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: bottom left;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: bottom left;
  -ms-transform: rotateY(-90deg);
  transform-origin: bottom left;
  transform: rotateY(-90deg); }

#top-top-wall {
  position: absolute;
  top: 0;
  left: 80px;
  width: 640px;
  height: 80px;
  background-color: #f39c12;
  -webkit-transform: translate3d(0, 0, 80px);
  -moz-transform: translate3d(0, 0, 80px);
  -ms-transform: translate3d(0, 0, 80px);
  transform: translate3d(0, 0, 80px); }

#top-left-wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 600px;
  background-color: #f39c12;
  -webkit-transform: translate3d(0, 0, 80px);
  -moz-transform: translate3d(0, 0, 80px);
  -ms-transform: translate3d(0, 0, 80px);
  transform: translate3d(0, 0, 80px); }

#top-bottom-wall {
  position: absolute;
  top: 520px;
  left: 0;
  width: 800px;
  height: 80px;
  background-color: #f39c12;
  -webkit-transform: translate3d(0, 0, 80px);
  -moz-transform: translate3d(0, 0, 80px);
  -ms-transform: translate3d(0, 0, 80px);
  transform: translate3d(0, 0, 80px); }

#top-right-wall {
  position: absolute;
  top: 0;
  left: 720px;
  width: 80px;
  height: 600px;
  background-color: #f39c12;
  -webkit-transform: translate3d(0, 0, 80px);
  -moz-transform: translate3d(0, 0, 80px);
  -ms-transform: translate3d(0, 0, 80px);
  transform: translate3d(0, 0, 80px); }

#box {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  top: 300px;
  left: 300px; }

#box .left {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #cc0;
  -webkit-transform-origin: bottom left;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: bottom left;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: bottom left;
  -ms-transform: rotateY(-90deg);
  transform-origin: bottom left;
  transform: rotateY(-90deg); }

#box .right {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #16a085;
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateY(90deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateY(90deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateY(90deg);
  transform-origin: bottom right;
  transform: rotateY(90deg); }

#box .back {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  -webkit-transform-origin: top right;
  -webkit-transform: rotateX(90deg);
  -moz-transform-origin: top right;
  -moz-transform: rotateX(90deg);
  -ms-transform-origin: top right;
  -ms-transform: rotateX(90deg);
  transform-origin: top right;
  transform: rotateX(90deg); }

#box .front {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #47c9af;
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: bottom right;
  -moz-transform: rotateX(-90deg);
  -ms-transform-origin: bottom right;
  -ms-transform: rotateX(-90deg);
  transform-origin: bottom right;
  transform: rotateX(-90deg); }

#box .top {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #27ae60;
  -webkit-transform: translateZ(100px);
  -moz-transform: translateZ(100px);
  -ms-transform: translateZ(100px);
  transform: translateZ(100px); }

HTML

重力、加速度模拟

box,gravity

编辑器支持Emmet

快捷键

重力、加速度模拟

box,gravity

纯CSS实现的机械狗在盒子上跳跃动画

使用Matter.js实现围绕在标题文本周围的重力球效应

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：