海底世界鱼群效果-html代码-BFW代码库

海底世界鱼群效果

代码语言：html

所属分类：动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
        width: 100vw;
        height: 100vh;
        background-color: black;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background:url(http://repo.bfw.wiki/bfwrepo/image/5e4c71cd307e7.png);/*https://www.wuwm.com/post/poem-underwater-unsettlement#stream/0 */
        background-size:cover;
        background-repeat:no-repeat;
    }
    #tank {
        width:100%;
        height:100%;
    }
    .school {
        position:absolute;
        top:50%;
        left:50%;
    }
    .fish {
        will-change:left,top;
        position:absolute;
    }
</style>

</head>
<body translate="no">
<p id="controls"></p>
<div id="tank"></div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script >
var myoptions, gui;
var fishes = ["🐟", "🐠", "🐡"]
var tank = document.getElementById("tank")
var WINDOW_MIN;
var MIN_THRESHOLD = 640

window.onload = ()=>{
    generateControls()
    initializeTank()
}
window.addEventListener("resize", () => {
    initializeTank()
})


/*Fish functions*/
function initializeTank() {
    WINDOW_MIN = Math.min(tank.clientHeight, tank.clientWidth)
    generateFishTank()
    if(WINDOW_MIN<=MIN_THRESHOLD) {
       .........完整代码请登录后点击上方下载按钮下载查看