css实现三维文字从楼梯流动动画效果代码-html代码-BFW代码库

css实现三维文字从楼梯流动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现三维文字从楼梯流动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  background: hsl(0 0% 10%);
}

.panels {
  display: flex;
  flex-direction: column;
}
.panel {
  --hue: 18;
  --lightness-base: 30;
  font-family: 'Google Sans', sans-serif;
  font-weight: bold;
  font-size: 3vmin;
  color: hsl(0 0% 94%);
  display: inline-block;
  background: hsl(var(--hue) 100% calc(var(--lightness, var(--lightness-base)) * 1%));
  overflow: hidden;
  height: 20vmin;
  width: 20vmin;
  transform-style: preserve-3d;
  perspective: 800px;
}
/*.panel:nth-of-type(1) {
  overflow: visible;
}*/
/*.panel:nth-of-type(1) .panel__content,
.panel:nth-of-type(2) .panel__content {
  background: hsl(280 80% 50% / 0.2);
  -webkit-animation: slide 3s calc(var(--delay) * 1s) infinite both linear;
  animation: slide 3s calc(var(--delay) * 1s) infinite both linear;
}*/

.panel__content {
  height: 300%;
  width: 100%;
  display: grid;
  align-items: center;
  place-items:  center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
  -webkit-animation: slide 4s calc(var(--delay) * 1s) infinite both linear;
          animation: slide 4s calc(var(--delay) * 1s) infinite both linear;
}
.panel:nth-of-type(1) {
  --delay: 0;
  --lightness: var(--lightness-base);
  transform: rotateX(32deg) rotateY(-32deg) rotateX(0deg) translate3d(-61%, 81%, 0);
}
.panel:nth-of-type(2) {
  --delay: 1;
  --lightness: calc(var(--lightness-base) + 10);
  transform: rotateX(32deg) rotateY(-32deg) rotateX(-100deg) translate3d(-76%, 74%, 0);
}
.panel:nth-of-type(3) {
  --delay: 2;
  --lightness: calc(var(--lightness-base) + 5);
  transform: rotateX(32deg) rotateY(-32deg);
}
.panel:nth-of-type(4) {
  --delay: 3;
  --lightness: calc(var(--lightness-base) + 10);
  transform: rotateX(32deg) rotateY(-32deg) r.........完整代码请登录后点击上方下载按钮下载查看