印刻君

最近我逛热风小程序（一个卖鞋的小程序）时，发现了一个奇特的图片样式。图片的四个圆角是反向的，和常规图片不一样。 思索一番后，我发现想实现这个效果，需要的 CSS 知识还挺多，于是整理这篇文章。

高度固定的轮播图，你肯定经常看到、并知道怎么实现，但高度变化的轮播图呢？我会先解释高度变化的原理，然后说明关键实现，最后再给出原生 H5 和小程序的示例代码。

我使用 HTML 和 CSS 实现了一个蛟龙闹海效果。代码中没有引用图片。我会依次解释如何实现海浪、龙和云朵，接着我会给出整体代码，最后，我会做一个简单的总结。

电商类 H5、小程序把商品加入到购物车时，常常有一个抛物线动画。比如麦当劳小程序，当你点击加购按钮时，会看到有一个小汉堡从卡片汉堡上抛出，然后掉落到购物袋里。本文介绍了这种动画的实现方法。

我选择把 HTML 放入离线包，这意味着 H5 出现线上故障时，没有办法及时修复。因此，我必须额外设计一套降级方案，保证离线包发生故障时能够快速降级。

循环轮播图，你肯定并不陌生，实现方案非常多。大多数实现方案需要复制元素，比如实现 5 个元素的轮播需要用 7 个元素。多出的 2 个元素一个是头部元素，另一个是尾部元素。能不复制元素吗？

如果你想知道取余和取模的区别和应用、以及 mod 函数如何实现，看完这篇文章，你一定有所收获。我会先给出取余运算和取模运算的计算方式，再用四个例子解释计算方式，接着我会谈一谈什么时候该取余，什么时候该