嗯 就是这样一个例子，视频学到的一个特效，实际用处并不大，但是可以帮助理解JS语言和熟悉CSS3样式。
设计：
观察一张图片的变化，发现：
1、图片缩放（随机，并且不是同时运动）
1、从大到小
2、从小到大，透明度从1到0（在第一步运动完成后立马开始）
2、图片旋转（随机，并且不是同时运动的。需要在全部运动走完以后开始）
3. 因为每张图片是随机开始变换的，所以起始时间是不同的，这里可设置一个延迟器setTimeout，时间用random随机生成即可。
4. 中间需要用到自执行函数，因为setTimeout无视for循环的i，所以每次延时器运行的时候i可能都出错，用自执行函数保存i的每一次值。
5. 转换期间按钮的div是不能点击的，需要标记和判断。
6.运动共有两个，缩放和旋转，注意缩放全部结束才能开始旋转，这里也要处理好。
笔记：
然后就直接实现了，在加载页面的时候就运行这个特效。
补上中间查到的一些资料：
1.CSS3 opacity 属性：
value属性的值应该从父元素继承
2.HTML DOM scale() 方法：参数
scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。 这里我直接一个参数就是同时缩小高度和宽度 3. div是块标签，现在这种情况此div的标签会被里面图片高度自己撑起来，img标签都是默认向左漂浮的，刚好每行10个每个80px
margin: 0 auto是margin: 0 auto 0 auto的简写，也就是左右自动居中，至于为什么没有紧挨着上面的div，这个应该是上面那个margin: 80px auto，已经设置了跟下面的div外边距80px距离 btn的高度没有设置，靠font撑的 以上这篇JavaScript+CSS相册特效实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 |
|---|
@H_
