div+css实现走廊中外星人站立无限循环动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现走廊中外星人站立无限循环动画效果代码
代码标签: div css 走廊 外星人 站立 无限 循环 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @-webkit-keyframes slide { 0% { transform: translateZ(320px); } 100% { transform: translateZ(640px); } } @keyframes slide { 0% { transform: translateZ(320px); } 100% { transform: translateZ(640px); } } @-webkit-keyframes fadeIn { 0% { transform: translateZ(-1280px) translateY(-150%); } 100% { transform: translateZ(-1280px) translateY(-20%); } } @keyframes fadeIn { 0% { transform: translateZ(-1280px) translateY(-150%); } 100% { transform: translateZ(-1280px) translateY(-20%); } } @-webkit-keyframes fadeIn2 { 0% { transform: translateZ(-960px) translateY(-20%); } 100% { transform: translateZ(-960px) translateY(0); } } @keyframes fadeIn2 { 0% { transform: translateZ(-960px) translateY(-20%); } 100% { transform: translateZ(-960px) translateY(0); } } html, body { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background-image: linear-gradient(#000, #fff); } .perspective { position: absolute; top: 50%; left: 50%; margin: -160px 0 0 -160px; width: 320px; height: 320px; perspective: 320px; transform-style: preserve-3d; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: slide 5s linear infinite; animation: slide 5s linear infinite; transform-style: preserve-3d; } .corridor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; } .corridor .img, .corridor .img-mirror { position: absolute; top: 0; left: 0; width: 400%; height: 400%; background-image: url("//repo.bfw.wiki/bfwrepo/svg/waixingren.svg"); background-size: 100% 100%; transform: translateZ(-80px) scale(0.25); transform-origin: 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .corridor .img .eye, .corridor .img-mirror .eye { position: absolute; top: 13%; left: 73%; z-index: 2; width: 18px; height: 18px; border-radius: 18px; background: red; box-shadow: 0 0 100px red; } .corridor .img-mirror { transform: translateZ(-240px) scale(-0.25, 0.25) translateX(-100%); } .corridor:nth-child(1) { z-index: 4; transform: translateZ(0px); } .corridor:nth-child(2) { z-index: 3; transform: translateZ(-320px); } .corridor:nth-child(3) { z-index: 2; transform: translateZ(-640px); } .corridor:nth-child(4) { z-index: 1; transform: translateZ(-960px); } .corridor:nth-child(5) { z-index: 0; transform: translateZ(-1280px); } .corridor:nth-child(4) { -webkit-animation: fadeIn2 5s linear infinite; animation: fadeIn2 5s linear infinite; } .corridor:nth-child(4) div:nth-child(2) { transform-style: preserve-3d; } .corridor:nth-child(4) div:nth-child(2)::before { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: #666666; content: ""; transform: rotateX(90deg); transform-origin: 0 0; } .corridor:last-child { -webkit-animation: fadeIn 5s linear infinite; animation: fadeIn 5s linear infinite; } .corridor:last-child div:nth-child(2)::before { position: absolute; top: 0; left: 0; width: 100%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0