查看页面上的源代码,我看到这些卡是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调整大小以适合浏览器窗口的部分。