链接中显示的动画

时间:2017-12-22 作者:Jheel Dave

我希望在此链接中显示动画http://krixisolutions.com/我怎么得到这个?将CSS动画作为预加载程序添加到WordPress 1

1 个回复
SO网友:Nathaniel Flick

查看页面上的源代码,我看到这些卡是svg,由css转换运行,如下所示:

    .svg-cards {
    display: inline-block;
    position: absolute;
    width: 20vmin;
    overflow: hidden;
    min-width: 100px;
    border-radius: 15px;
    box-shadow: -30px -30px 40px 15px rgba(0, 0, 0, 0.9);
    line-height: 0;
}
.svg-cards.rotation {
    box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.6);
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -ms-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-timing-function: cubic-bezier(0.01, 0.74, 0.28, 1.01);
    -moz-transition-timing-function: cubic-bezier(0.01, 0.74, 0.28, 1.01);
    -ms-transition-timing-function: cubic-bezier(0.01, 0.74, 0.28, 1.01);
    -o-transition-timing-function: cubic-bezier(0.01, 0.74, 0.28, 1.01);
    transition-timing-function: cubic-bezier(0.01, 0.74, 0.28, 1.01);
}
创建您的卡片,然后应用您想要的适当过渡,包括“旋转”和“缩放”,使它们放大。

从技术上讲,这不是一个预加载程序,而是一个在窗口加载时使用JavaScript调整大小以适合浏览器窗口的部分。

结束

相关推荐