如何实现这种小船在水面游动并留下痕迹的效果？

Question

长按屏幕 船会左右动并留下痕迹。
请问这是用h5css3做的吗？
请问这种效果是如何实现的？
或者有什么好的实现思路吗？

原网页需微信中打开

Answer 1

https://pre.ih5.cn/v3/files/1...
这是波浪
看到图片就知道怎么实现了

Answer 2

long long ago，我用 Flash 大概是这么实现的：

1. 在船后面画一个浪花
2. 1 帧后，把图案不透明度降低一级，在船现在的位置上再画一个浪花
3. 如此反复，就能形成一个逐渐消散的浪迹了

Answer 3

看第2张图，浪花不需要渐隐
那么最简单的 H5 + CSS 做法

【三层】 游船
【二层】 浪花轨迹 (除了浪花，其他都是 透明的，和底图一样宽高)
【一层】 底图

【二层】背景图 background-position:top center;
然后根据游船位置，变化【二层】 高度即可

补充：
浪花要渐隐的也不麻烦
在 浪花层 上加一层，放 底图，宽高和浪花层一致（同时变动）

.Test{
  display: inline-block;
  width: 366px;
  height: 278px;
  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}
.Test img{
  mix-blend-mode: overlay;
}

<div class="Test">
  <img alt="" src="http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=34480776be0e7bec238f0be51a1e950e/b3fb43166d224f4a2ded606a0ff790529822d156.jpg">
</div>

代码参考 https://segmentfault.com/q/1010000006682394

Answer 4

浪花就是一个图，随滑动控制显示图的height
船随滑动控制它的位置
用js+css也能实现