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;
  }
}
相关推荐
大猫会长4 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_4 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe10106 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang6 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi7 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课10 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥10 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101011 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋13 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101014 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端