过度的平移效果

                    过度的平移效果

（作者：老薛，撰写时间：2019年1月19日）

 

在平移效果中，可以通过animation+transtion实现平移。transtion通过定义left和top值来移动。其中 animation是定义一个动画。而我要利用transtion来过度平移，还要用到的属性：translate、opacity、ease-in-out、transform。下面我来一一介绍。

我们看一下面这张图我要做的效果

                              图1

                                图2

大家也看到图2了中间有个大大领取红包这四个字，而这四个字是一张背景图片。

最中间那些小红包也是由一张张背景图片来实现的。

而我的效果其实是：我的鼠标移入这个大大领取红包的背景图片，而那些小的一张张背景图会从上面中间部分下来，也就是从顶部中间部分平移下来。还有我点击领取红包这四个字的背景图片还会跳到变成另一张图片的效果。

下面我就从html来开始，请看下面图

这就是html部分，也就这么多，而a标签里面的一张背景图片也就是刚才我所说的另一张图片。中间被a标签包围住的img里面图片就是一张张小红包的背景图片。

而下面这张图是CSS部分

我们先从CSS中的.chang{}这一部分，我们主要看一下里面的有一张背景图片，这张背景图片就是领取红包的那张图片。

接下来请看下面这张图片，是这个平移效果的最主要部分。

我先说一下opacity：意思是不透明性，也是设置透明度的；opacity：0；表示完全透明，opacity：1；表示完全不透明。opacity：0，虽然表示完全透明，但是实际上会占用空间。而我也设置了.chang img里面的值为0：完全透明 ，.chang:hover img里面的值为1: 完全不透明。

下一个-webkit-transform：-webkit 是表示针对 safari 浏览器支持，而transform是主要对这个对象的位置、旋转和缩放的意思。而里面3s是平移多少总时间（一般以秒为单位）。

还有个-webkit-transtion意思就是过度效果。

再看到translate就是-webkit-transform里面的属性，translate意思是：平移，基于 `XY` 轴重新定位元素。属性值为一个时，`x`、`y` 轴参数相同；为两个时，`x`、`y` 轴分别定位。所以我们看到translate(0px,-2000px)就是X轴平移0个像素（就是没有移动），Y轴平移-2000像素（就是向下平移）。（0px，20px）也是一样X轴平移0个像素，Y轴平移20像素（就是向上平移）。

最后一个ease-in-out：是规定以慢速度开始和结束的过度效果。也就是开始和结束都慢，俩头慢。

下面这张图片是过度平移的效果（刚开始的部分）

所以整个过渡的平移效果就是：从鼠标移入到领取红包这个背景图片，然后有个过渡效果，那些小的一张张背景图片（也就是小红包图片）会从顶部中间的位置慢慢地平移下来（先慢后快的速度，先透明再到不透明），等到自己设置的总时间过后，图片会按原路返回（速度和时间跟原来的一样），然后那些一张张小图片会慢慢地过渡变成透明。要是在过程中停止，就会按原路返回。