js+svg实现一个鲨鱼跟随鼠标游动动画效果代码
代码语言：html
所属分类：动画
代码描述：js+svg实现一个鲨鱼跟随鼠标游动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#whale {
height: 99.5%;
width: 100%;
}
</style>
</head>
<body>
<div id="whale"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
var whale = (function () {
var element = document.getElementById("whale")
, width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
, height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
, fps = 30
, easy = 6
, maxspeed = 150
, delay = 15
, mouse = {x: width/2, y: height/2}
, defs
, parts
;
defs = '<defs><linearGradient gradientTransform="matrix(0 -2038 1116.5 0 -157 2622)" gradientUnits="userSpaceOnUse" id=":s6y" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(1.25 -194.75 407.5 4.5 -111 4022)" gradientUnits="userSpaceOnUse" id=":s98" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -251.25 1004.5 0 -154 4314)" gradientUnits="userSpaceOnUse" id=":s99" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -252.5 1004.5 0 -154 4511)" gradientUnits="userSpaceOnUse" id=":s9a" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -448.5 290 0 -158 4984)" gradientUnits="userSpaceOnUse" id=":s9b" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -236.75 1004.5 0 -154 4737)" gradientUnits="userSpaceOnUse" id=":s9c" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -830.5 524 0 -158 4509)" gradientUnits="userSpaceOnUse" id=":s9d" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -289.5 1004.5 0 -154 4767)" gradientUnits="userSpaceOnUse" id=":s9e" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1143.5 646 0 -158 4064)" gradientUnits="userSpaceOnUse" id=":s9f" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -282.75 1004.5 0 -154 4809)" gradientUnits="userSpaceOnUse" id=":s9g" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1431.5 760.5 0 -157 3773)" gradientUnits="userSpaceOnUse" id=":s9h" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -232 1004.5 0 -154 4892)" gradientUnits="userSpaceOnUse" id=":s9i" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1669.5 893.5 0 -157 3435)" gradientUnits="userSpaceOnUse" id=":s9j" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -2038 1116.5 0 -157 2622)" gradientUnits="userSpaceOnUse" id=":s9k" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1956 1051.5 0 -157 2910)" gradientUnits="userSpaceOnUse" id=":s9l" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -2038 1116.5 0 -157 2622)" gradientUnits="userSpaceOnUse" id=":s9m" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -754.75 1256.5 0 -181 584)" gradientUnits="userSpaceOnUse" id=":s9n" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1003.25 1424.5 0 -166 468)" gradientUnits="userSpaceOnUse" id=":s9o" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1129 1476 0 -166 311)" gradientUnits="userSpaceOnUse" id=":s9p" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(1.5 -176 407.5 3.5 -149 3748)" gradientUnits="userSpaceOnUse" id=":s9q" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1379 1698.5 0 -157 222)" gradientUnits="userSpaceOnUse" id=":s9r" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(1.5 -176 407.5 3.5 -149 3748)" gradientUnits="userSpaceOnUse" id=":s9s" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1552 1975.5 0 -157 75)" gradientUnits="userSpaceOnUse" id=":s9t" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(1.5 -176 407.5 3.5 -149 3748)" gradientUnits="userSpaceOnUse" id=":s9u" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1748.5 2040.5 0 -157 -70)" gradientUnits="userSpaceOnUse" id=":s9v" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(1.5 -176 407.5 3.5 -149 3748)" gradientUnits="userSpaceOnUse" id=":s9w" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -1916 2148.5 0 -157 -140)" gradientUnits="userSpaceOnUse" id=":s9x" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(1.5 -176 407.5 3.5 -149 3748)" gradientUnits="userSpaceOnUse" id=":s9y" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -2141 2339 0 -158 -187)" gradientUnits="userSpaceOnUse" id=":s9z" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(1.5 -176 407.5 3.5 -149 3748)" gradientUnits="userSpaceOnUse" id=":sa0" x1="-1" x2="1" y1="0" y2="0"><stop offset="0.3843137254901961" stop-color="rgb(241,241,241)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(255,255,255)" stop-opacity="1.000"/></linearGradient><linearGradient gradientTransform="matrix(0 -2311 2526.5 0 -157 -183)" gradientUnits="userSpaceOnUse" id=":sa1" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0