css时间一个全屏菜单切换过渡动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css时间一个全屏菜单切换过渡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .page__content { display: none; color: white; font-size: 40px; } .page__content--active { display: block; } .overlay { z-index: 1000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; perspective: 1000px; } .overlay__scene { position: absolute; width: calc(100vw + 72.794vh); height: 100%; top: 0; left: -36.397vh; display: flex; justify-content: center; align-items: center; font-size: 15vmin; perspective: 500px; background: linear-gradient(-20deg, #ae1313, #ebdd47); transform: skew(20deg) translateX(172.794%); overflow: hidden; } .overlay__scene--in { -webkit-animation: overlayIn 400ms ease-in-out 1 both; animation: overlayIn 400ms ease-in-out 1 both; } .overlay__scene--in .overlay__label { -webkit-animation: labelIn 2s ease-in-out 1 forwards; animation: labelIn 2s ease-in-out 1 forwards; } .overlay__scene--out { -webkit-animation: overlayOut 400ms ease-in-out 1 both; animation: overlayOut 400ms ease-in-out 1 both; } .overlay__scene--out .overlay__label { -webkit-animation: none; animation: none; } @-webkit-keyframes labelIn { from { transform: skewY(-10deg) translateY(-50%) rotatey(10deg); } to { transform: skewY(-10deg) translateY(-50%) rotatey(-10deg); } } @keyframes labelIn { from { transform: skewY(-10deg) translateY(-50%) rotatey(10deg); } to { transform: skewY(-10deg) translateY(-50%) rotatey(-10deg); } } @-webkit-keyframes overlayIn { from { transform: skew(20deg) translate3d(172.794%, 0, 0); } to { transform: skew(20deg) translate3d(0, 0, 0); } } @keyframes overlayIn { from { transform: skew(20deg) translate3d(172.794%, 0, 0); } to { transform: skew(20deg) translate3d(0, 0, 0); } } @-webkit-keyframes overlayOut { from { transform: skew(20deg) translate3d(0, 0, 0); } to { transform: skew(20deg) translate3d(-100%, 0, 0); } } @keyframes overlayOut { from { transform: skew(20deg) translate3d(0, 0, 0); } to { transform: skew(20deg) translate3d(-100%, 0, 0); } } .overlay__label { position: absolute; width: 200%; height: 25vmin; line-height: 1; top: 50vh; left: -50%; background: #f28888; color: #810e0e; mix-blend-mode: multiply; display: flex; justify-content: center; align-items: center; transform: skewY(-10deg) translateY(-50%); } .overlay__label-content { transform: skew(-20deg); } .overlay__ribbon { -webkit-animation: ribbon 750ms infinite linear both; animation: ribbon 750ms infinite linear both; width: 200px; height: 10px; background: #ff5656; position: absolute; left: 0; top: 0; z-index: -2; } .overlay__ribbon:nth-child(1) { background-color: #c86125; top: 43vh; -webkit-animation-delay: 1485ms; animation-delay: 1485ms; width: 210px; } .overlay__ribbon:nth-child(2) { background-color: #dfb039; top: 98vh; -webkit-animation-delay: 627ms; animation-delay: 627ms; width: 283px; } .overlay__ribbon:nth-child(3) { background-color: #ca6727; top: 36vh; -webkit-animation-delay: 1454ms; animation-delay: 1454ms; width: 406px; } .overlay__ribbon:nth-child(4) { background-color: #dca536; top: 10vh; -webkit-animation-delay: 804ms; animation-delay: 804ms; width: 320px; } .overlay__ribbon:nth-child(5) { background-color: #e6c83f; top: 62vh; -webkit-animation-delay: 1589ms; animation-delay: 1589ms; width: 486px; } .overlay__ribbon:nth-child(6) { background-color: #b92f19; top: 37vh; -webkit-animation-delay: 254ms; animation-delay: 254ms; width: 352px; } .overlay__ribbon:nth-child(7) { background-color: #e7ca40; top: 91vh; -webkit-animation-delay: 1397ms; animation-delay: 1397ms; width: 113px; } .overlay__ribbon:nth-child(8) { background-color: #c14b20; top: 19vh; -webkit-animation-delay: 376ms; animation-delay: 376ms; width: 337px; } .overlay__ribbon:nth-child(9) { background-color: #dca536; top: 54vh; -webkit-animation-delay: 1981ms; animation-delay: 1981ms; width: 382px; } .overlay__ribbon:nth-child(10) { background-color: #e3be3d; top: 21vh; -webkit-animation-delay: 1825ms; animation-delay: 1825ms; width: 258px; } .overlay__ribbon:nth-child(11) { background-color: #c24f21; top: 27vh; -webkit-animation-delay: 1487ms; animation-delay: 1487ms; width: 439px; } .overlay__ribbon:nth-child(12) { background-col.........完整代码请登录后点击上方下载按钮下载查看
网友评论0