最近做了一个网站界面，里面用了不少动画效果，有的直接用CSS3的特性，有的用jQuery实现，让我深刻体会到CSS3的博大精深。话说：”有总结才有进步“，这里规整一下，便于未来翻阅。
开发环境：
Bootstrap v4.0.0
jQuery v3.2.1
Swiper 4.2.6
动画效果一：图片轮播
1.轮播单个图片
Bootstrap下的carousel，很容易就实现这个功能。
但是客户有个小需求，就是图片上的prev、next的两个按钮要在鼠标移动到图片上才渐显，鼠标离开图片就隐藏这两个按钮，同时prev、next要用客户提供的图片。通常我们会通过display来控制图片的显示与否，使用display的缺点是需要设置img之外的div的宽高，否则img的display为none的时候，样式会乱。这里我使用CSS3中的“隐身术”—— opacity，img一直都在，只是“隐身”了。
//html、js代码还是Bootstrap的标准代码。
2.轮播多个图片
Bootstrap下的carousel能够非常方便的实现轮播单图，但是这个网页还需要轮播多图，就是一屏显示多图，单击next，向右滚动一张图片；单击prev，向左滚动一张图。carousel就不中了。
在谷歌上找到不少jQuery的插件，都不满意，无意间找到 Swiper这个工具，在基础演示中发现210这个示例离我的要求比较贴近，果断的使用之。
无奈的是，估计是Swiper要支持移动端，故为了节省界面空间，把prev和next按钮缺省都放在了图片上，这对于我那眼里揉不得沙子的客户可是接受不了的。又求助谷歌，发现还真有不少伙计问Swiper如何把这两个按钮放在图片外面，不过没有得到明确的解决方案，看来只能依靠自己了。
看了Swiper的代码，发现prev、next按钮是在js中指定的，这就意味着你想用哪个按钮控制图片的轮播，prev、next按钮放哪里，都随你。
这里需要注意slidesPerGroup参数，如果希望图片分组显示，就是1、2、3、4显示，按下next，显示5、6、7、8，可以使用slidesPerGroup，注意图片总数必须是slidesPerGroup设置数字的整数倍，否则最后一页就让你崩溃了；如果不设置这个参数，显示方式就是 1、2、3、4；2、3、4、5；就是我的这个需求。
3.走马灯
这个需求有点类似轮播单图，只是图片要“犹抱琵琶半遮面”的从左边慢慢的往右移动。这个可以在网上找到很多现成代码，但都不能满足要求，为啥呢？“上帝”要求，图片显示完整后，要停留数秒钟，再继续移动。
在上找到了无缝向上、向左滚动--间歇性滚动，文中的向左滚动的代码跟我的需求契合度高，代码借过来使使。
对于停留数秒钟，有人推荐使用setTimeout，我试了一下，在这个场景中不行，图片的移动控制有问题。于是采用“耗费CPU”的方法，用while循环。
注意：我的需求中仅显示两张图片，在js代码中判断ul的位置判断了两次，如果是更多的图，js代码需要根据实际需求优化。
动画效果二：给图片添加说明文字
鼠标移动到图片上时显示说明文字，鼠标移走时文字消失。“隐身术”——opacity可以很容易实现，文字的显示和消失，关键点在于说明文字的position。
我是图片的解释文字
鼠标掠过，给图片加上蒙层
这个需求就是鼠标移动到图片上时，图片加上透明的蒙层。这个有两种实现方式：
参考上述方法，多添加一个div，div中无内容，需要注意的是这种方式适用于图片尺寸是固定的。
-
对于图片尺寸是自适应的，也可以使用 opacity 实现，参见如下代码：
img:hover{ filter:alpha(opacity=10); opacity:.1 }
动画效果三：鼠标移动到图片，图片变换
1.变换前后的图片大小相同
客户希望ul li的黑点变成自选图片，鼠标移动到图片上变换图片。这个可以用background直接实现。
- hover可以换背景1
- hover可以换背景2
- hover可以换背景3
- hover可以换背景4
2.变换前后的图片大小不同
网页右侧的工具栏中的图片，鼠标移动到图片上，展现出图片向左推出（即两个图片的内容是一样的，只是推出的图片右边的边框长了点）的效果。对于这个效果，我本想用background的方法，但是两个图片大小不同，变换的时候样式乱了；也想过用一个图片，通过改CSS效果，但是也不成功。于是尝试用jQuery的hover来改变img标签的内容，进行两个图片的切换，搞定！
动画效果四：鼠标掠过，元素放大
这个CSS3已经替我们想到了 —— transform，它可以实现旋转、放大、移动等特效，详情可以参考 CSS3 transform。
myimg:hover{
transform: scale(1.2,1.2); //原图放大1.2倍
cursor: pointer;
transition: 0.5s ease; //效果柔和点
}
浏览器兼容性
这个问题是让所有前端工程师头痛的问题，尤其是面对早期IE的兼容，简直是欲哭无泪。好在我的客户这次没有这么强硬，要求只要支持IE10就可以，但是如果用户使用IE10以下的浏览器访问，要给出一个友好的提示。这就涉及到对浏览器的判定问题。谷歌上可以找到很多检测浏览器版本的方法，如用navigator或者特殊的函数。对于各浏览器对CSS3的支持，可速查CSS3 浏览器支持参考手册
我用的后者，因为只需要判断IE10一下的版本，用特殊的函数简单些。
//需要注意，alarm.html是在IE10以下浏览器中显示，所以只能用低版本的jQuery
总结
虽然被客户的需求整得几近崩溃，但是还是在骂完之后耐着性子干完了活儿，事后总结还是学到了不少东西。