matter实现鼠标点击喷射箭头自由落地运动动画效果代码-html代码-BFW代码库

matter实现鼠标点击喷射箭头自由落地运动动画效果代码

代码语言：html

所属分类：动画

代码描述：matter实现鼠标点击喷射箭头自由落地运动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
	min-height:100vh;
	min-width:100vw;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-items:center;
	align-content:center;
	justify-content:center;
	background:white;
	font-family:"Montserrat",sans-serif;
	font-size:1.5em;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
#besideMouse {
	z-index:10;
	top:-1000px;
	position:fixed;
	font-weight:bold;
	font-size:1rem;
	text-align:center;
	opacity:.75;
	transform-origin:left center;
	transform:rotate(33deg);
	pointer-events:none;
	transition:opacity .5s
}
#besideMouse.hidden {
	opacity:.2
}
h1 {
	color:rgba(0,0,0,0.75);
	text-stroke:5px black;
	padding:0;
	pointer-events:none
}
h1 span.struck {
	color:rgba(0,0,0,0.95)
}
hr {
	color:rgba(0,0,0,0.75);
	border:0;
	border-top:1px solid;
	background:0
}
p {
	color:rgba(0,0,0,0.45)
}
a {
	color:#F7ACCF;
	text-decoration:none
}
a span.struck {
	color:#CB8DAA
}
.smaller {
	font-size:.65em
}
em {
	opacity:.5
}
.aside {
	margin-top:2rem
}
.aside a {
	color:#5DD9C1
}
.aside span.struck {
	color:#33776A
}
#world {
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	pointer-events:none
}
.title .wrapNode {
	display:inline
}
.title span {
	line-height:.5em;
	display:inline-block;
	transform:translateY(0);
	transition:transform .15s,color .25s
}
.title span.struck {
	transform:translateY(0.2em)
}

    </style>

</head>

<body>
    <div id="world"></div>
    <p id="besideMouse">click<br>me!</p>
    <div class="wrapper">
        <h1>
            <div class="title">Eric D'Addio</div><small class="title">Creative Developer</small></h1>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.js"></script>

    <script>
        const cursorSprite = "https://image.flaticon.com/icons/png/128/587/587376.png";
    
    // module aliases
    var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body;
    
    // create an engine
    var engine = Engine.create();
    
    // create a renderer
    var canvas = document.getElementById("world");
    var render = Render.create({
      element: canvas,
      engine: engine,
      options: {
        width: canvas.offsetWidth,
        height: canvas.offsetHeight,
        background: "transparent",
        wireframes: false,
        showAngleIn.........完整代码请登录后点击上方下载按钮下载查看