鱼跃动画特效

代码语言:html

所属分类:动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Fish jumping</title>
<title>Fish jumping</title>
<style>
      html,body{
height:100%;
}
body{
margin:0px;
overflow:hidden;
background-color: #3366CC;
}
[xaf] circle{
stroke-width:1px;
stroke:black;
opacity:1;
display:none;
transition:.6s
}
[xaf] ellipse {
fill:none;
stroke:rgba(0,0,0,.3);
opacity:1;
display:none;
transition:.4s;
}
.suportPeix{
position:fixed;
}
    </style>

</head>
<body translate="no">
<body>
<svg width="0" height="0">
<defs>
<mask id="mask">
<rect x="0" y="0" width="800" height="290" fill="white" />
</mask>
<mask id="maskReflex">
<rect x="0" y="290" width="800" height="290" fill="white" />
</mask>
<linearGradient id="grad0" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="20%" stop-color="#111122" />
<stop offset="50%" stop-color="#115511" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="20%" stop-color="#111122" />
<stop offset="50%" stop-color="#553300" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="20%" stop-color="#111122" />
<stop offset="50%" stop-color="#002244" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="20%" stop-color="#111122" />
<stop offset="50%" stop-color="#662200" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
<linearGradient id="grad4" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="20%" stop-color="#000000" />
<stop offset="50%" stop-color="#333333" />
<stop offset="100%" stop-color="#cccccc" />
</linearGradient>
<linearGradient id="vermell" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="20%" stop-color="#cc0000" />
<stop offset="50%" stop-color="#ff0000" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
<g id="peix" transform="translate(100,-100) scale(-2,2)">
<path id="silueta" d="M96.806,50.581c-0.775,0.021-1.511,0.322-2.283,0.202c-0.016-0.053-0.03-0.151-0.038-0.202  c0.666-0.302,1.403-0.49,2.011-0.925c0.325-0.316,0.792-0.691,0.573-1.209c-0.242-1.068-1.218-1.729-2.06-2.307  c-1.007-0.707-2.14-1.173-3.214-1.735c-1.18-0.504-2.771-2.356-18.807-5.387c-5.913-1.133-11.902-1.648-12.152-1.836  c-5.526,0.102-11.099-6.188-12.797-6.691C47.776,30.317,47.581,31,47.452,31h0.002c-0.16,1-0.614,8.46,0.302,8.738  c-1.03,0.308-2.109,0.271-3.156,0.497c-1.72,0.33-10.451,2.965-14.923,3.992c-1.585,0.294-3.21,0.235-4.815,0.242  c-1.549-0.029-3.073-0.372-4.561-0.761c-1.817-0.518-16.438-6.635-16.537-6.133c0.038,4.065,2.203,6.819,3.75,10.432  c0.052,0.526,0.269,1.035,0.196,1.576c-0.858,2.793-4.111,5.208-4.913,8.098c0.006,0.556-0.234,1.051-0.438,1.554  c0.67,0.044,1.339,0.083,2.013,0.067c1.466-0.172,10.055-2.336,11.376-2.645c1.292-0.299,2.501-0.85,3.777-1.164  c0.725-0.173,1.377-0.548,2.104-0.669c1.443-0.188,2.901-0.367,4.359-0.225c1.016,0.104,2.027,0.203,3.029,0.42  c0.757,0.166,6.36,1.226,9.716,2.373c2.207,0.173,10.578,3.585,11.368,3.751c-1.289,2.099-1.147,3.252-1.48,5.746  c-0.216,0.879-0.254,1.888,0.359,2.614c0.278,0.264,0.731,0.277,1.044,0.069c4.525-4.812,9.603-6.665,9.82-7.348  c2.756,0.329,5.53,0.044,8.294,0.059c15.207-0.16,25.758-8.233,26.728-8.767c0.812-0.413,1.678-0.872,2.166-1.675  C97.422,51.488,97.287,50.769,96.806,50.581z " />
<circle id="ull" cx="87" cy="50" r="2" stroke="#331100" stroke-width="2" fill="white" />
</g>
<g id="reflex" transform="translate(-100,-100) scale(2,2)" fill-opacity=".3">
<use xlink:href="#silueta" />
<use xlink:href="#ull" />
</g>
<g mides stroke="none" stroke-width="1" fill="none">
<line x1="0" y1="290" x2="800" y2="290" />
<circle cx="400" cy="290" r="250" />
</g>
</defs>
</svg>
</.........完整代码请登录后点击上方下载按钮下载查看

网友评论0