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.........完整代码请登录后点击上方下载按钮下载查看