酷炫纯CSS代码实现时空穿梭动效

web前端*先森

已于 2022-07-25 15:22:07 修改

阅读量1k

点赞数 1

文章标签： css servlet java

于 2022-07-25 15:19:59 首次发布

本文链接：https://blog.csdn.net/qq_27939089/article/details/125975820

版权

效果展示：

使用场景，可以用于大数据大屏背景，或者是穿越动画的过渡，下载地址在文章末尾

项目目录结构：

html部分：

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>酷炫纯CSS代码实现时空穿梭动效</title>
       <link rel="stylesheet" href="css/index.css">
   </head>
   <body>
       <div class="scene">
           <div class="wrap">
               <div class="wall wall-right"></div>
               <div class="wall wall-left"></div>
               <div class="wall wall-top"></div>
               <div class="wall wall-bottom"></div>
               <div class="wall wall-back"></div>
           </div>
           <div class="wrap">
               <div class="wall wall-right"></div>
               <div class="wall wall-left"></div>
               <div class="wall wall-top"></div>
               <div class="wall wall-bottom"></div>
               <div class="wall wall-back"></div>
           </div>
       </div>
   </body>
</html>

css部分：

.wall {
background: url(../img/123.jpg);
background-size: cover;
}

html,
body {
   height: 100%;
   width: 100%;
   overflow: hidden;
}

body {
background: #000;
text-align: center;
}

body:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}

.scene {
   display: inline-block;
   vertical-align: middle;
   perspective: 5px;
   perspective-origin: 50% 50%;
   position: relative;
}

.wrap {
   position: absolute;
   width: 1000px;
   height: 1000px;
   left: -500px;
   top: -500px;
   transform-style: preserve-3d;
   animation: move 12s infinite linear;
   animation-fill-mode: forwards;
}

.wrap:nth-child(2) {
animation: move 12s infinite linear;
animation-delay: 6s;
}

.wall {
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0;
   animation: fade 12s infinite linear;
   animation-delay: 0;
}

.wrap:nth-child(2) .wall {
animation-delay: 6s;
}

.wall-right {
transform: rotateY(90deg) translateZ(500px);
}

.wall-left {
transform: rotateY(-90deg) translateZ(500px);
}

.wall-top {
transform: rotateX(90deg) translateZ(500px);
}

.wall-bottom {
transform: rotateX(-90deg) translateZ(500px);
}

.wall-back {
transform: rotateX(180deg) translateZ(500px);
}

@keyframes move {
   0% {
       transform: translateZ(-500px) rotate(0deg);
   }

   100% {
       transform: translateZ(500px) rotate(0deg);
   }
}

@keyframes fade {
   0% {
       opacity: 0;
   }

   25% {
       opacity: 1;
   }