在fullpage.js中 transform的的用法，用于过度

最新推荐文章于 2024-01-27 02:12:59 发布

脚本大王

最新推荐文章于 2024-01-27 02:12:59 发布

阅读量768

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_22823581/article/details/77888410

本文详细介绍了如何使用CSS的transform和transition属性实现元素的缩放效果。通过设置初始状态的缩放比例为0来隐藏元素，并在激活状态下逐渐放大至原始比例，实现了平滑的过渡效果。文章还解释了兼容性和延迟执行的概念。

fullpage 要在div的类的前面多加一个.action ，这个类才回显示。下面来讲讲transform

        .bg-2-bar-1{
            display: inline-block;
            width: 390px;
            height: 250px;
            text-align: center;

            transform: scale(0, 0);
            transition: all 6s;

        }

其中：   transform: scale(0, 0);
   transition: all 6s;
transform ：是过度之前的状态， 在这边scale()表示，原始状态图片的缩略比例为0 ，说明是隐藏的。
transition：转变下一个状态的过程所花费的时间。

---------------------------------------------------------------------------------------------------
 
再看  action 部分，相当于：hover 的效果：

        .active .bg-2-bar-1{
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
            transition-delay: 5s;
        }

一句句分析： -webkit-transform
这句是兼容谷歌浏览器。
 transform: scale(1, 1);
之前是为隐藏的，所以这个是变成原始比例
transition-delay: 5s;
这个相当于我们早上起床一样，赖床的时间，就是触发到这个css 的时候，没有马上执行，而是等待一个几秒钟，自己设定。