css实现立体空间穿越背景效果
代码语言:html
所属分类:背景
代码描述:css实现立体空间穿越背景效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <style> html,body { height: 100%; margin: 0; font-family: arial,microsoft yahei; color: #fefefe } body { background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; background-color: #002878 } #fileWrapper { transition: all .5s ease } #fileWrapper:hover { opacity: 1!important } #visualizer_wrapper { text-align: center } footer { position: fixed; bottom: 2px; color: #aaa } .play-box { position: fixed; width: 1000px; height: 100px; margin: 0 auto; left: 0; right: 0; bottom: 0 } .drive,.shadows { position: fixed; top: 0; right: 0; bottom: 0; left: 0 } .drive li { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 1vw 3vw rgba(0,0,0,.5) inset; width: 100vw; height: 100vh; animation: drive 10s linear infinite; animation-direction: reverse } .shadows li { position: absolute; left: 50%; top: 50%; background: #000; width: 100vw; height: 100vh; animation: shadows 10s linear infinite; animation-direction: reverse; list-style-type: none; list-style-image: none } .drive li:nth-child(1) { animation-delay: 0 } .drive li:nth-child(2) { animation-delay: -1s } .drive li:nth-child(3) { animation-delay: -2s } .drive li:nth-child(4) { animation-delay: -3s } .drive li:nth-child(5) { animation-delay.........完整代码请登录后点击上方下载按钮下载查看
网友评论0