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;
  }
}
相关推荐
AliPaPa6 分钟前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
parade岁月17 分钟前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
小帆聊前端19 分钟前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
Harriet嘉37 分钟前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
FuckPatience43 分钟前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
Kingsdesigner1 小时前
从平面到“货架”:Illustrator与Substance Stager的包装设计可视化工作流
前端·平面·illustrator·设计师·substance 3d·平面设计·产品渲染
一枚前端小能手1 小时前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
屿小夏1 小时前
JSAR 开发环境配置与项目初始化全流程指南
前端
微辣而已1 小时前
next.js中实现缓存
前端
Dcc1 小时前
纯 css 实现前端主题切换+自定义方案
前端·css