<分区>
html - 像苹果网站那样的过渡延迟菜单
这是我的 fiddle , 我想要像 Apple 这样的精确过渡和效果移动视口(viewport)中的站点。
到目前为止，我创建了类似 apple 的东西，但我的过渡和效果与 apple 不同，我认为 apple 中的菜单链接比我的更漂亮。
.in .atitel-menu-links li {
opacity: 1;
transform: translateY(0px);
transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.in .atitel-menu-links li:nth-child(1){
transition-delay: 600ms;
}
.in .atitel-menu-links li:nth-child(2) {
transition-delay: 800ms;
}
.in .atitel-menu-links li:nth-child(3) {
transition-delay: 1s;
}
.in .atitel-menu-links li:nth-child(4){
transition-delay: 1.3s;
}
.in .atitel-menu-links li:nth-child(5){
transition-delay: 1.6s;
}
更新:
有什么帮助会很好吗？
谢谢
最佳答案
像这样制作你的CSS代码`
.atitel-menu-links li {
opacity: 0;
transform: translateY(-10px) scale(1.7);
}
.in .atitel-menu-links li {
opacity: 1;
transform: translateY(0px) scale(1);
transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.in .atitel-menu-links li:nth-child(1) {
transition-delay: 70ms;
}
.in .atitel-menu-links li:nth-child(2) {
transition-delay: 140ms;
}
.in .atitel-menu-links li:nth-child(3) {
transition-delay: 210ms;
}
.in .atitel-menu-links li:nth-child(4) {
transition-delay: 280ms;
}
.in .atitel-menu-links li:nth-child(5) {
transition-delay: 350ms;
}
JS fiddle 在这里 http://jsfiddle.net/hLza6qa6/
虽然和苹果的菜单不完全一样但是比你的更接近
关于html - 像苹果网站那样的过渡延迟菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32135493/