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;
  }
}
相关推荐
wuxuanok几秒前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia几秒前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder10 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士10 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明10 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201415 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius16 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku18 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄21 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙22 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端