在WeGame的PC侧官方网站的首页上，制作了非常多的滚动动画效果。
在这里，我们将轻松截取其中两个有趣的转地视频。大家都感觉到了。过渡动画1：
过渡动画2：
我们先看一下这个视频啊。
要分解核心步骤：
在场景1中，LOGO开始使用WeGame的LOGO进行扩展
LOGO被放大到一定程度，开始毁灭，LOGO背后的场景2逐渐出现
LOGO放大后逐渐消失，场景2完全出现
这里，要实现整个动画，有一个非常重要的场景：利用LOGO元素，剪切背景，只看LOGO背后的元素，就可以得到这样的图像：
注意，图片的白色部分，不是白色的，而是透明的，需要能透过背后的元素。
当然，用户界面可以截取这样的图，但毕竟很麻烦。
假设只有一个LOGO元素。
我们怎样才能利用这个LOGO来切割背景呢
是的，在这里可以使用。让我们试一试：
例如，假设有以下背景：。
[手机资讯]
使用LOGO贴图作为MASK来剪切此背景。
将显示以下图形：。
Oh No，这和我们想象的恰恰相反，我们追求的是LOGO的地方是透明的，背景的其他地方是保留的。
怎么做。别慌，这里可以用上一篇文章介绍的东西，还不太清楚的可以按这里：高阶切割技巧！基于一张图像的任意颜色转换
轻松更改代码。
这样，我们就能顺利地得到这样的图形：
现在，让我们根据上面的剪切层来模拟最基本的动画效果。
我们在LOGO后面的图层上，用一张图片来表现场景2
基于滚动条的滚动、滚动动画的实现
内容是上述的使用和实现的层
那么，在这个时候向下滚动动画的话，会触发的动画，也就是“开始”，看看效果吧。
我有点在意那个。但这里还缺少一些细节。
首先，我们需要一个LOGO，它的透明度逐渐从1隐藏到0。这是比较简单的，加完之后，看看效果怎嚒样。
虽然离目标更近了一步，但仔细看原来的效果，我们还差一个：
在LOGO淡出的过程中，背后的背景不是直接出现的，而是淡出的过程。因此，完全地说，在动画过程开始时，有四个层。
因此，完整代码如下：。
这样可以恢复原来的效果。
是的，有一个。让我们来看下一件事。
在这里，动画也很容易分解。
数字放大，逐渐带出场景2
场景2具有非常酷的光收缩效果
这里的数字放大与最初的转盘动画非常相似，不详细说明。
在场景2中，我们来看看光影的收缩效果是如何实现的。
这里看起来很复杂，其实很简单。这里，核心在这两张照片上：
图像素材1：
注意，这里最核心的是，图像中的白色不是白色的，而是透明的，可以透过背景内容。
这样，我们只需要在这张图片背后放上另一张图片：
想到了吗 是的，把这个图像从大的值变成小的值就可以了！
什么意思。你看这张图就知道啦。
你需要了解整个动画，但实际上需要一定的基础。上效果：
这样，使用强大的CSS和一些有趣的技巧，我们使用纯CSS实现了这两种看起来非常负责任的转场动画效果。而且，这在以前完全不可能使用纯粹的CSS来实现。
一篇更精彩的CSS技术文章总结在我的Github-iCSS上，继续更新，欢迎点击star订阅收藏。
1e
发表评论