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