css现在实现的一些3d效果很不错，今天我们就使用css实现一个3d迷宫隧道的效果，如下图所示：
<html>
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png"
href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
color="#111">
<title>css实现3d迷宫隧道效果www.woaidaogu.com</title>
<style>
body {
background: #575757;
display: flex;
height: 100vh;
margin: 0;
}
main {
/* Timing */
--durM: 6s;
--durD: 0.5s;
/* Tunnel itself */
--size: 20em;
--depth: calc(var(--size) * 6);
--bgPos: calc(var(--size) * 0.4);
/* Camera movement */
--endX1: 33%;
--endX2: 67%;
--endY1: 40%;
--endY2: 60%;
-webkit-animation: po var(--durM) ease-in-out infinite;
animation: po var(--durM) ease-in-out infinite;
margin: auto;
overflow: hidden;
perspective: 5em;
perspective-origin: 50% 50%;
position: relative;
width: var(--size);
height: var(--size);
transform: scale(6);
}
main:before,
div {
position: absolute;
}
main:before {
-webkit-animation: end var(--durM) ease-in-out infinite;
animation: end var(--durM) ease-in-out infinite;
background: currentColor;
box-shadow: 0 0 1em 1em;
color: #000;
content: "";
display: block;
margin: -0.5em -0.5em;
width: 1em;
height: 1em;
top: 50%;
left: 50%;
z-index: 5;
}
div {
background: conic-gradient(#000 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0/var(--bgPos) var(--bgPos);
}
.t,
.l {
top: 0;
left: 0;
transform-origin: 0 0;
}
.r,
.b {
right: 0;
bottom: 0;
transform-origin: 100% 100%;
}
.t,
.b {
width: 100%;
height: var(--depth);
}
.r,
.l {
filter: brightness(70%);
width: var(--depth);
height: 100%;
}
.t {
-webkit-animation: t var(--durD) linear infinite;
animation: t var(--durD) linear infinite;
background-position: 0 calc(var(--bgPos) / 2);
filter: brightness(40%);
transform: rotateX(-90deg);
}
.r {
-webkit-animation: r var(--durD) linear infinite;
animation: r var(--durD) linear infinite;
background-position: calc(var(--bgPos) / 2) 0;
transform: rotateY(-90deg);
}
.b {
-webkit-animation: b var(--durD) linear infinite;
animation: b var(--durD) linear infinite;
transform: rotateX(90deg);
}
.l {
-webkit-animation: l var(--durD) linear infinite;
animation: l var(--durD) linear infinite;
transform: rotateY(90deg);
}
@-webkit-keyframes po {
from,
to {
perspective-origin: var(--endX1) var(--endY1);
}
25% {
perspective-origin: var(--endX2) var(--endY1);
}
50% {
perspective-origin: var(--endX2) var(--endY2);
}
75% {
perspective-origin: var(--endX1) var(--endY2);
}
}
@keyframes po {
from,
to {
perspective-origin: var(--endX1) var(--endY1);
}
25% {
perspective-origin: var(--endX2) var(--endY1);
}
50% {
perspective-origin: var(--endX2) var(--endY2);
}
75% {
perspective-origin: var(--endX1) var(--endY2);
}
}
@-webkit-keyframes t {
to {
transform: rotateX(-90deg) translateY(calc(var(--bgPos) * -1));
}
}
@keyframes t {
to {
transform: rotateX(-90deg) translateY(calc(var(--bgPos) * -1));
}
}
@-webkit-keyframes r {
to {
transform: rotateY(-90deg) translateX(var(--bgPos));
}
}
@keyframes r {
to {
transform: rotateY(-90deg) translateX(var(--bgPos));
}
}
@-webkit-keyframes b {
to {
transform: rotateX(90deg) translateY(var(--bgPos));
}
}
@keyframes b {
to {
transform: rotateX(90deg) translateY(var(--bgPos));
}
}
@-webkit-keyframes l {
to {
transform: rotateY(90deg) translateX(calc(var(--bgPos) * -1));
}
}
@keyframes l {
to {
transform: rotateY(90deg) translateX(calc(var(--bgPos) * -1));
}
}
@-webkit-keyframes end {
from,
to {
top: var(--endY1);
left: var(--endX1);
}
25% {
top: var(--endY1);
left: var(--endX2);
}
50% {
top: var(--endY2);
left: var(--endX2);
}
75% {
top: var(--endY2);
left: var(--endX1);
}
}
@keyframes end {
from,
to {
top: var(--endY1);
left: var(--endX1);
}
25% {
top: var(--endY1);
left: var(--endX2);
}
50% {
top: var(--endY2);
left: var(--endX2);
}
75% {
top: var(--endY2);
left: var(--endX1);
}
}
</style>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<main>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<script
src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
<div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
<div></div>
<a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
<a id="xl_chrome_ext_close" href="javascript:;"></a>
</div>
</body>
</html>通过以上内容我们知道了css如何实现3d迷宫隧道效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
