jquery+css实现鱼儿水中跳跃游动动画效果代码-html代码-BFW代码库

jquery+css实现鱼儿水中跳跃游动动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery+css实现鱼儿水中跳跃游动动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <head>
        <style type="text/css">
                    html,body {
        width:100%;
        height:100%;
        margin:0;
        padding:0
}
body {
        background:-webkit-linear-gradient(left,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
        background:-o-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
        background:-moz-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
        background:linear-gradient(to right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
        background-size:400% 400%;
        animation:gradientBG 5s ease infinite
}
@keyframes gradientBG {
        0% {
        background-position:0 50%
}
50% {
        background-position:100% 50%
}
100% {
        background-position:0 50%
}
}.container {
        margin:0;
        padding:0;
        background-color:transparent;
        width:100%;
        height:200px;
        z-index:-1;
        position:fixed;
        bottom:0;
        left:0
}

        </style>
    </head>

    <body>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
        <div id="jsi-flying-fish-container" class="container"></div>
        <script>
            var RENDERER = {
     POINT_INTERVAL: 5,
     FISH_COUNT: 3,
     MAX_INTERVAL_COUNT: 50,
     INIT_HEIGHT_RATE: 0.5,
     THRESHOLD: 50,
     init: function() {
         this.setParameters();
         this.reconstructMethods();
         this.setup();
         this.bindEvent();
         this.render()
     },
     setParameters: function() {
         this.$window = $(window);
         this.$container = $("#jsi-flying-fish-container");
         this.$canvas = $("<canvas />");
         this.context = this.$canvas.appendTo(this.$container).get(0).getContext("2d");
         this.points = [];
         this.fishes = [];
         this.watchIds = []
     },
.........完整代码请登录后点击上方下载按钮下载查看