html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../Public/css/main.css"/> </head> <body> <div class='assembly'> <div class='bar'> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='bar'> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='bar'> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='bar'> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='bar'> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> </div> </body> </html>css:
body { overflow: hidden; margin: 0; height: 100vh; perspective: 65em; perspective-origin: 50% calc(50% - 25em); background: #000; } div { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; } .assembly { transform: rotateY(50deg) translate3d(0, -10em, 5em); animation: move 8s linear infinite; } @keyframes move { to { transform: rotateY(-30deg) translate3d(0, 5em, 0); } } .bar { transform-origin: 0 2.5em 0; animation: grow 8s cubic-bezier(0.19, 1, 0.23, 1) infinite; } .bar:nth-child(1) { margin-left: -15em; transform: scaleY(1); color: #7ed6be; } .bar:nth-child(2) { margin-left: -7.5em; transform: scaleY(2); color: #ecf081; } .bar:nth-child(3) { margin-left: 0em; transform: scaleY(2.3); color: #ffbe40; } .bar:nth-child(4) { margin-left: 7.5em; transform: scaleY(2.5); color: #ef746f; } .bar:nth-child(5) { margin-left: 15em; transform: scaleY(2.9); color: #bc8696; } @keyframes grow { 0% { transform: scaleY(0); } } .face { margin: -2.5em; width: 5em; height: 5em; backface-visibility: hidden; /*隐藏被旋转的 div 元素的背面*/ background: currentColor; } .face:nth-child(n + 2):after { position: absolute; top: 100%; left: 0; width: inherit; /*inherit是继承父类的属性,一般用于字体、颜色、背景等*/ height: inherit; opacity: .1; background: inherit; content: ''; } .face:nth-child(1) { transform: rotate3d(1, 0, 0, 90deg) translateZ(2.5em); -webkit-filter: brightness(0.7); filter: brightness(0.7); } .face:nth-child(2) { transform: rotate3d(0, 1, 0, -90deg) translateZ(2.5em); -webkit-filter: brightness(1); filter: brightness(1); } .face:nth-child(3) { transform: rotate3d(0, 1, 0, 0deg) translateZ(2.5em); -webkit-filter: brightness(0.85); filter: brightness(0.85); } .face:nth-child(4) { transform: rotate3d(0, 1, 0, 90deg) translateZ(2.5em); -webkit-filter: brightness(0.55); filter: brightness(0.55); } /*Filters 其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contrast对比度 blur模糊 drop-shadow阴影*/