我发现了“ http://thegoodman.cc/ ”。这是一个绝对了不起的网站。
我只是真的很好奇,至于这个文档的正文是如何略微淡入的,并在这个页面中向上滑动:
它是使用 CSS 动画完成的。查看源代码时,您会发现这行代码:
.sup {
animation:sup 1.8s backwards;
}
@keyframes sup {
0% {
opacity:0;
transform:translateY(50px);
}
30% {
opacity:0;
}
100% {
opacity:1;
transform:translateY(0);
}
}
它会淡入文本(使用opacity
)并使用 向上移动它translateY
。
请注意,它使用Prefix Free JS 库来防止必须添加诸如-webkit-
等前缀-moz-
。