html--仿真隧道

html

html 复制代码
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>zero-element 3d css corridor</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {
  perspective: 600px;
  background: rgb(10,25,10);
}
html,body {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-style: preserve-3d;
}


html:before,
html:after,
body:before,
body:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  background-size: 100% 100%, 400px 400px;
  animation: 2s move3 linear infinite;
}

/* ceiling */
html:before,
html:after {
  width: 200px;
  height: 1600px;
  margin: -800px -100px;
  animation: 2s move2 linear infinite;
  
}
/* walls */
body:before,
body:after {
  height: 200px;
  width: 1600px;
  margin: -100px -800px;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0), rgba(10,20,10,.75) 50%, rgba(10,25,10,1)),
    url(http://keithclark.co.uk/labs/css-fps/wall.jpg);
}

/* ceiling */
html:before {
  transform: translateY(-100px) rotateX(-90deg);  
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(10,20,10,.75) 50%, rgba(10,25,10,1)),
    url(http://keithclark.co.uk/labs/css-fps/ceil.jpg);
}

/* floor */
html:after {
  transform: translateY(100px) rotateX(-90deg);
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(10,20,10,.75) 50%, rgba(10,25,10,1)),
    url(http://keithclark.co.uk/labs/css-fps/floor.jpg);
}

/* left wall */
body:before {
  transform: translateX(-100px) rotateY(90deg);
}

/* right wall */
body:after {
  transform: translateX(100px) rotateY(90deg);
}

body {
  animation: 2s move3 linear infinite;
}
html {
  animation: 2s move2 linear infinite,
    10s move ease-in-out alternate infinite;
}

@keyframes move {
  from {
    transform: translateX(-50px) rotateY(7deg) rotateX(2deg)
  }
  to {
    transform: translateX(50px) rotateY(-7deg) rotateX(-4deg)  rotateZ(5deg)
  }
}

@keyframes move2 {
  from {
    background-position: 0 0, 0 400px;
  }
  to {
    background-position: 0 0, 0 0;
  }
}
@keyframes move3 {
  from {
    background-position: 0 0, 400px 0;
  }
  to {
    background-position: 0 0, 0 0;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <!--

This is a work in progress

* Need to rething the z movement effect so it can be H/W accelerated
* Need to create tiling textures
* background-position z movement trick can be done with one animation

-->
  
  

</body>

</html>

css

css 复制代码
html {
  perspective: 600px;
  background: rgb(10,25,10);
}
html,body {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-style: preserve-3d;
}


html:before,
html:after,
body:before,
body:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  background-size: 100% 100%, 400px 400px;
  animation: 2s move3 linear infinite;
}

/* ceiling */
html:before,
html:after {
  width: 200px;
  height: 1600px;
  margin: -800px -100px;
  animation: 2s move2 linear infinite;
  
}
/* walls */
body:before,
body:after {
  height: 200px;
  width: 1600px;
  margin: -100px -800px;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0), rgba(10,20,10,.75) 50%, rgba(10,25,10,1)),
    url(http://keithclark.co.uk/labs/css-fps/wall.jpg);
}

/* ceiling */
html:before {
  transform: translateY(-100px) rotateX(-90deg);  
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(10,20,10,.75) 50%, rgba(10,25,10,1)),
    url(http://keithclark.co.uk/labs/css-fps/ceil.jpg);
}

/* floor */
html:after {
  transform: translateY(100px) rotateX(-90deg);
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(10,20,10,.75) 50%, rgba(10,25,10,1)),
    url(http://keithclark.co.uk/labs/css-fps/floor.jpg);
}

/* left wall */
body:before {
  transform: translateX(-100px) rotateY(90deg);
}

/* right wall */
body:after {
  transform: translateX(100px) rotateY(90deg);
}

body {
  animation: 2s move3 linear infinite;
}
html {
  animation: 2s move2 linear infinite,
    10s move ease-in-out alternate infinite;
}

@keyframes move {
  from {
    transform: translateX(-50px) rotateY(7deg) rotateX(2deg)
  }
  to {
    transform: translateX(50px) rotateY(-7deg) rotateX(-4deg)  rotateZ(5deg)
  }
}

@keyframes move2 {
  from {
    background-position: 0 0, 0 400px;
  }
  to {
    background-position: 0 0, 0 0;
  }
}
@keyframes move3 {
  from {
    background-position: 0 0, 400px 0;
  }
  to {
    background-position: 0 0, 0 0;
  }
}
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui