<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 + GSAP实现的池塘动画场景</title>
<style>
body {
background-color: #C5D5D8;
overflow: hidden;
text-align: center;
color: #FFF;
}
#contenedor {
position: relative;
margin-top: 40px;
}
#moscaCont {
width: 80%;
height: 20%;
}
#mosca {
top: 50px;
left: 50px;
width: 40%;
height: 40%;
position: fixed;
z-index: 0;
}
</style>
</head>
<body>
<div id="contenedor">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1706.9 700">
<!-- agua -->
<svg class="img" filter="url(#agua)">
<ellipse cx="742.9" cy="480.2" fill="#C5D5D8" rx="732.9" ry="142.6" />
<g opacity=".5">
<path fill="#3B5B1B" stroke="#456335" stroke-width=".76" stroke-miterlimit="10" d="M806 496.6c19.9 18.8 34.1 30.5 46.6 29.5s-2.8-38.2-35.4-59.2l-32.7-21s30 5.1 40.7-3.9c10.8-9 24.9-15 24.9-15s-19.3-8.7-33-5.6c-13.6 3.1-19.1-5.6-19.1-5.6s-10 13.8-16.6 7.3-12.8 6.3-21 4.9c-8.2-1.4 18 35.3 18 35.3l27.6 33.3z"
/>
<path fill="#436823" stroke="#B3C46A" stroke-width=".76" stroke-miterlimit="10" d="M798.4 422.5c-3.1 3.2-7.8 6.9-12.9 6.9-2.7 0-5.2-1.1-7.3-3.1-.2-.2-.6-.5-.8-.5-.9 0-3 1.4-4.5 2.4-2.3 1.6-5.1 3.4-8.4 4.1 2.8 6 10.4 18.1 17.6 28.2l27.2 33c15.7 14.8 30.8 28.1 41.8 28.1h1.1c.6-1.6.1-8.3-6.9-19.7-7.3-12-18.5-23.3-30.6-31.1l-32.7-21 3.2-8.3c.1 0 8.2 1.4 17.3 1.4 9.5 0 16.5-1.5 19.8-4.3 5.3-4.4 11.3-8.1 16.2-10.8-4.4-1.3-9.8-2.4-14.9-2.4-2 0-3.8.2-5.5.5-2.3.5-4.5.8-6.6.8-5.9 0-10.3-2.1-13.1-4.2z"
stroke-dasharray="3.038" />
<path fill="#3B5B1B" stroke="#456335" stroke-width=".76" stroke-miterlimit="10" d="M672.5 483.7c-23.1 14.7-39.2 23.5-51.3 20.3-12.1-3.3 9.8-37 45.8-51.5l36-14.5s-30.4-.6-39.3-11.4c-8.9-10.8-21.7-19.4-21.7-19.4s20.6-4.9 33.4.7 19.8-2 19.8-2 7.3 15.4 15 10.3c7.7-5.2 11.4 8.6 19.7 8.7 8.3.2-24.3 31.3-24.3 31.3l-33.1 27.5z"
/>
<path fill="#436823" stroke="#B3C46A" stroke-width=".76" stroke-miterlimit="10" d="M659.9 409.7c-2.3 0-4.5.1-6.5.3 4.3 3.6 9.5 8.3 13.9 13.7 5.5 6.7 24.9 9.5 35.9 9.7l1.6 8.8-36 14.5c-13.4 5.4-26.4 14.4-35.9 24.8-9 9.9-10.7 16.4-10.4 18.1 1.3.3 2.6.5 4.1.5 9.8 0 23.3-7.4 43.3-20.1l32.9-27.3c8.9-8.5 18.7-19 22.5-24.4-3-1.3-5.4-3.6-7.4-5.6-1.2-1.2-3.3-3.2-4.1-3.2-.1 0-.4.1-.8.4-1.8 1.2-3.8 1.8-5.8 1.8-5.9 0-10.5-5.2-13.3-9.3-2.3 1.1-5.4 2.1-9.2 2.1-3.5 0-7.2-.8-10.9-2.4-3.6-1.7-8.3-2.4-13.9-2.4z"
stroke-dasharray="3.038" />
<path fill="none" stroke="#15280D" stroke-width=".76" stroke-miterlimit="10" d="M835.5 506.8c-7.5-1.2-49.5-41.5-54.8-57.7m-145.5 40.8c17.8-6.8 32.2-9.5 68.7-39.8" />
<path fill="#3B5B1B" stroke="#456335" stroke-width=".76" stroke-miterlimit="10" d="M699.3 466.2c-5.4-13.6 10.4-42.4 43.8-41.5 28.5.8 39.2 7.6 41.2 32.9 2.9 37.4-46.3 53.8-47.7 77.6-.8 15.4-15.2 19.6-14.7 10.4 2.3-40.6-14.1-58-22.6-79.4z" />
<path fill="#436823" stroke="#B3C46A" stroke-miterlimit="10" d="M741.6 429.4c-20.2 0-30.3 11.6-33.8 16.7-4.4 6.5-6.1 13.9-4.3 18.5 2 5.1 4.5 9.9 7.1 15 8.2 16.1 17.6 34.3 15.9 66.1 1.9-.8 5.2-4.2 5.6-10.7.7-12 10.9-21.7 21.7-31.9 13.5-12.8 27.5-26 26-45.1-1.7-22.1-9.3-27.9-36.8-28.7-.5 0-.9.1-1.4.1z"
stroke-dasharray="3.038" />
<path fill="#3B5B1B" stroke="#456335" stroke-width=".76" stroke-miterlimit="10" d="M667.7 524c22.8-8.9 49.4-21.4 64.8-18.8 15.4 2.6 42.5 23.7 55.4 41.8 12.9 17.9-120.2-23-120.2-23z" />
<path fill="#436823" stroke="#B3C46A" stroke-miterlimit="10" d="M728.1 509.4c-11.9 0-29.5 7.1-46.5 14 25.3 7.5 82 23.6 100.7 23.6-13.3-17.1-37.4-35.1-50.5-37.3-1.1-.2-2.4-.3-3.7-.3z" stroke-dasharray="3.038" />
<path fill="#3B5B1B" stroke="#456335" stroke-width=".76" stroke-miterlimit="10" d="M713.7 575.2c-14.2-3-24.1-13-35.9-20.9-9.1-6.1-11.1-8.7-20.8-12.8-4.2-1.8-17.7-8.4-2.2-18.1 19.6-12.2 57.3-7.6 73.4-5.8 16.1 1.8 52.4 16.8 65.5 27.9 13.1 11.2 14.5 22.1 9.5 24-15 5.8-22.4-2.7-34.3 1.1-36.3 11.6-40.4 7.8-55.2 4.6z"
/>
<path fill="#436823" d="M694.5 519.9c-16.8 0-29.4 2.5-37.4 7.5-4.2 2.6-5.2 4.4-5.1 5.1.1.9 1.9 3 6.7 4.9 7.4 3.1 10.7 5.5 15.2 8.8 1.8 1.3 3.8 2.7 6.3 4.4 3.2 2.1 6.2 4.4 9.1 6.5 8.1 6 15.7 11.7 25.2 13.7 1.9.4 3.6.8 5.2 1.2 4.5 1.1 8.1 2 12.9 2 7.7 0 18-2.3 34.7-7.6 2.6-.8 5.2-1.2 8-1.2 3.2 0 6.1.5 8.9 1 2.7.5 5.3 1 8.1 1 3 0 5.7-.5 8.8-1.6.4-1.6-.9-8.2-10.5-16.4-12.7-10.8-48.4-25.3-63-26.9l-1.6-.2c-7.7-.9-19.4-2.2-31.5-2.2z"
/>
<g fill="none" stroke="#B3C46A" stroke-width=".76" stroke-miterlimit="10">
<path d="M799.7 566c.5-.2 1-.3 1.4-.5.1-.3.1-.8 0-1.5" />
<path d="M800.3 561.1c-1.3-3-4.1-7.2-9.6-12-12.7-10.8-48.4-25.3-63-26.9l-1.6-.2c-7.7-.9-19.4-2.2-31.6-2.2-16.8 0-29.4 2.5-37.4 7.5-4.2 2.6-5.2 4.4-5.1 5.1.1.9 1.9 3 6.7 4.9 7.4 3.1 10.7 5.5 15.2 8.8 1.8 1.3 3.8 2.7 6.3 4.4 3.2 2.1 6.2 4.4 9.1 6.5 8.1 6 15.7 11.7 25.2 13.7 1.9.4 3.6.8 5.2 1.2 4.5 1.1 8.1 2 12.9 2 7.7 0 18-2.3 34.7-7.6 2.6-.8 5.2-1.2 8-1.2 3.2 0 6.1.5 8.9 1 2.7.5 5.3 1 8.1 1 2 0 3.9-.2 5.8-.7"
stroke-dasharray="3.061 3.061" />
</g>
<path fill="#3B5B1B" stroke="#456335" stroke-width=".76" stroke-miterlimit="10" d="M729.9 456.3c-3.1-5.3-3.1-22.9 5.1-38.2 8.1-15.3 13.2-23.9 13.2-23.9s-12.2.2-17.8 1.4-6.8-19.3-6.8-19.3-8.1 8.3-14.1 9.5c-6 1.2-24.1-5.7-20.9 1.6 3.2 7.4 11.3 21.2 22 21.8 10.7.6 16.9 1.8 9.5 13.8-7.4 12 2.3 28.8-.6 38.9l10.4-5.6z"
/>
<path fill="#436823" stroke="#B3C46A" stroke-width=".76" stroke-miterlimit="10" d="M720 385.4c-2.9 2.2-6.4 4.3-9.7 4.9-.8.2-1.7.2-2.7.2-2.6 0-5.7-.5-8.7-1-1.6-.3-3.3-.6-4.7-.7 3.5 6.8 9.7 15.6 16.6 16 5.9.3 13.3.7 16.1 6 2.5 4.8-.3 10.4-3 14.7-3.5 5.6-2.1 13.2-.8 20.6l.3 1.8c-.4-9.2 1.9-21.4 7.5-32 3.8-7.2 6.9-12.8 9.2-16.9-3.3.2-6.7.5-8.8 1-.5.1-1 .2-1.4.2-7 0-8.9-9.7-9.6-13.4-.1-.4-.2-.9-.3-1.4z"
stroke-dasharray="3.038" />
<path fill="#3B5B1B" stroke="#456335" stroke-width=".76" stroke-miterlimit="10" d="M758.6 458.7c4-4.6 7.4-21.9 2.4-38.5s-8.4-26-8.4-26 11.9 2.5 17.2 4.8c5.3 2.3 10.4-17.6 10.4-17.6s6.4 9.7 12 12c5.6 2.4 24.7-1 20.2 5.7-4.5 6.6-15.2 18.6-25.8 17.1-10.6-1.5-16.9-1.5-12 11.7 5 13.2-7.8 27.8-6.9 38.3l-9.1-7.5z"
/>
<path fill="#436823" stroke="#B3C46A" stroke-miterlimit="10" d="M781.9 390.9c-.1.3-.3.7-.4 1-2.2 5.5-5.4 11.8-10.9 11.8-.9 0-1.8-.2-2.7-.5-2-.9-5.3-1.8-8.4-2.6 1.4 4.4 3.4 10.6 5.8 18.3 3.5 11.5 3.4 23.9 1.2 32.9.2-.6.4-1.2.7-1.7 2.7-7 5.6-14.2 3.2-20.4-1.7-4.6-3.3-10.2-.4-14.4 2.7-4 7.8-3.8 9.5-3.8 2.4 0 5.1.1 7.7.5.4.1.8 0 1.2 0 5.9 0 13-6 18.2-12.6-1.6-.1-3.4-.2-4.8-.2-4.4-.1-8.5-.2-11.4-1.4-3-1.4-6-4.2-8.5-6.9z"
stroke-dasharray="3.038" />
<circle cx="684.8" cy="566.9" r="21.3" fill="#FFF" stroke="#000" stroke-width=".76" stroke-miterlimit="10" />
<circle cx="746.4" cy="579.1" r="23.9" fill="#FFF" stroke="#000" stroke-width=".76" stroke-miterlimit="10" />
<circle cx="746.3" cy="582.5" r="12.9" stroke="#FFF" stroke-width=".76" stroke-miterlimit="10" />
<circle cx="685.2" cy="570.7" r="12.9" stroke="#FFF" stroke-width=".76" stroke-miterlimit="10" />
</g>
<path fill="#FAFCFB" d="M797.4 373.3c-7 0-13.9 0-20.9.1 253.1 10.6 440.2 48.2 440.2 93 0 51.8-250.8 94.1-564.2 95.9 46.3 1.9 94.9 3 144.9 3 323.1 0 585.1-42.9 585.1-95.9 0-53.2-262-96.1-585.1-96.1z" opacity=".5" />
<g opacity=".6">
<path fill="#5A6B63" d="M1
HTML5+GSAP实现的池塘场景动画效果源码.zip
版权申诉
138 浏览量
2022-11-03
23:50:34
上传
评论
收藏 139KB ZIP 举报
HTML5+GSAP实现的池塘场景动画效果源码.zip （4个子文件） 
132689834826250314 
index.html 31KB js 
jquery-1.11.0.min.js 94KB TweenMax.js 337KB EasePack.js 10KB资源评论
毕业_设计
- 粉丝: 1935
- 资源: 1万+
最新资源
- 基于matlab实现电磁优化计算功能，进行线型规划优化电磁设计.rar
- 基于matlab实现带精英策略的非支配排序遗传算法matlab 源码.rar
- 基于matlab实现差分进化算法，最新的用于替代遗传算法，是以后的主要发展方法.rar
- VSCode配置c/c++环境教程.md
- 基于matlab实现标准合作型协同进化遗传算法matlab源程序
- 七下人教.zip
- 基于matlab实现本份代码能对图像进行gabor滤波处理，结合指纹方向图以及指纹沟壑频率特性，对指纹图像进行增强.rar
- 基于matlab实现RBM神经网络实现了手写数字体识别的GUI程序.rar
- 基于matlab实现蝙蝠算法优化相关向量机建模对数据进行建模和预测.rar
- 基于matlab实现编写的禁忌搜索算法，解决了TSP问题，对初学者有重要的参考价值.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
