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;
  }
}
相关推荐
ZYMFZ6 分钟前
Redis主从复制与哨兵集群
前端·git·github
lumi.9 分钟前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
旧雨散尘13 分钟前
【react】初学react5-react脚手架搭建中的小众知识
前端·react.js·前端框架
炫饭第一名24 分钟前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
烛阴25 分钟前
Lua字符串的利刃:模式匹配的艺术与实践
前端·lua
奇舞精选25 分钟前
一文了解 Server-Sent Events (SSE):构建高效的服务器推送应用
前端
Yeats_Liao31 分钟前
Go Web 编程快速入门 11 - WebSocket实时通信:实时消息推送和双向通信
前端·后端·websocket·golang
纯爱掌门人37 分钟前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
丘耳42 分钟前
vis-network 知识点笔记
前端·javascript
有点笨的蛋42 分钟前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css