鱼跃动画特效
代码语言: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