div+css实现立体盒子翻转404错误页面动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现立体盒子翻转404错误页面动画效果代码
代码标签: div css 立体 盒子 翻转 404 错误 页面 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'> <style> body { background: #000; height: 100vh; overflow: hidden; display: flex; font-family: "Anton", sans-serif; justify-content: center; align-items: center; perspective: 1000px; } div { transform-style: preserve-3d; } .rail { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform: rotateX(-30deg) rotateY(-30deg); } .rail .stamp { position: absolute; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; background: #141414; color: #ff1205; font-size: 7rem; } .rail .stamp:nth-child(1) { -webkit-animation: stampSlide 40000ms -2300ms linear infinite; animation: stampSlide 40000ms -2300ms linear infinite; } .rail .stamp:nth-child(2) { -webkit-animation: stampSlide 40000ms -4300ms linear infinite; animation: stampSlide 40000ms -4300ms linear infinite; } .rail .stamp:nth-child(3) { -webkit-animation: stampSlide 40000ms -6300ms linear infinite; animation: stampSlide 40000ms -6300ms linear infinite; } .rail .stamp:nth-child(4) { -webkit-animation: stampSlide 40000ms -8300ms linear infinite; animation: stampSlide 40000ms -8300ms linear infinite; } .rail .stamp:nth-child(5) { -webkit-animation: stampSlide 40000ms -10300ms linear infinite; animation: stampSlide 40000ms -10300ms linear infinite; } .rail .stamp:nth-child(6) { -webkit-animation: stampSlide 40000ms -12300ms linear infinite; animation: stampSlide 40000ms -12300ms linear infinite; } .rail .stamp:nth-child(7) { -webkit-animation: stampSlide 40000ms -14300ms linear infinite; animation: stampSlide 40000ms -14300ms linear infinite; } .rail .stamp:nth-child(8) { -webkit-animation: stampSlide 40000ms -16300ms linear infinite; animation: stampSlide 40000ms -16300ms linear infinite; } .rail .stamp:nth-child(9) { -webkit-animation: stampSlide 40000ms -18300ms linear infinite; animation: stampSlide 40000ms -18300ms linear infinite; } .rail .stamp:nth-child(10) { -webkit-animation: stampSlide 40000ms -20300ms linear infinite; animation: stampSlide 40000ms -20300ms linear infinite; } .rail .stamp:nth-child(11) { -webkit-animation: stampSlide 40000ms -22300ms linear infinite; animation: stampSlide 40000ms -22300ms linear infinite; } .rail .stamp:nth-child(12) { -webkit-animation: stampSlide 40000ms -24300ms linear infinite; animation: stampSlide 40000ms -24300ms linear infinite; } .rail .stamp:nth-child(13) { -webkit-animation: stampSlide 40000ms -26300ms linear infinite; animation: stampSlide 40000ms -26300ms linear infinite; } .rail .stamp:nth-child(14) { -webkit-animation: stampSlide 40000ms -28300ms linear infinite; animation: stampSlide 40000ms -28300ms linear infinite; } .rail .stamp:nth-child(15) { -webkit-animation: stampSlide 40000ms -30300ms linear infinite; animation: stampSlide 40000ms -30300ms linear infinite; } .rail .stamp:nth-child(16) { -webkit-animation: stampSlide 40000ms -32300ms linear infinite; animation: stampSlide 40000ms -32300ms linear infinite; } .rail .stamp:nth-child(17) { -webkit-animation: stampSlide 40000ms -34300ms linear infinite; animation: stampSlide 40000ms -34300ms linear infinite; } .rail .stamp:nth-child(18) { -webkit-animation: stampSlide 40000ms -36300ms linear infinite; animation: stampSlide 40000ms -36300ms linear infinite; } .rail .stamp:nth-child(19) { -webkit-animation: stampSlide 40000ms -38300ms linear infinite; animation: stampSlide 40000ms -38300ms linear infinite; } .rail .stamp:nth-child(20) { -webkit-animation: stampSlide 40000ms -40300ms linear infinite; animation: stampSlide 40000ms -40300ms linear infinite; } @-webkit-keyframes stampSlide { 0% { transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px); } 100% { transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px); } } @keyframes stampSlide { 0% { transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px); } 100% { transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px); } } .world { transform: rotateX(-30deg) rotateY(-30deg); } .w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0