div+css实现三维数字内嵌动画遮罩播放音乐效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现三维数字内嵌动画遮罩播放音乐效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
:root {
  --s: 25px;
}

n {
        display: grid;
        grid-template-columns: repeat(4,var(--s));
}
.\39:before {
        content:"";
        grid-area: 2/2/span 2/span 2;
}
.\39 > d:nth-child(13),
.\39 > d:nth-child(14){
        grid-column: 4;
}
.\39:after {
  content: "";
  position: absolute;
  height: var(--s);
  aspect-ratio: 4;
  bottom: 0;
  transform-origin: bottom;
  transform: rotateX(90deg);
  box-shadow: 0 0 20px 7px #000d;
}
.\31:before {
        content:"";
        grid-area: 1/1/span 7/span 3;
}
.\31:after {
  content: "";
  position: absolute;
  width: var(--s);
  aspect-ratio: 1;
  bottom: 0;
  right: 0;
  transform-origin: bottom;
  transform: rotateX(90deg);
  box-shadow: 0 0 20px 7px #000d;
}
d {
        --st: 5;
        --d: .1s;
        --de: .05s;
        aspect-ratio: 1;
        background: 
                url(//repo.bfw.wiki/bfwrepo/images/rick.webp)
                var(--x,0px) calc(50% + var(--y,0px))/0px 0px;
        background-color: #2f2f2e;
        display: grid;
        animation: c1 var(--d) calc(8s + var(--de)) var(--st) both var(--m,);
  scale: 1.02;
}
@keyframes c1 {
        to {background-color: #01597c}
}
.rick d{
 background-size: calc(21*var(--s)) auto;
}
d:before,
d:after {
        content:"";
        grid-area: 1/1;
}
d:before {
        transform-origin: top;
        transform: rotateX(-90deg);
        background: #484848;
        animation: c2 var(--d) calc(8s + var(--de)) var(--st) both;
}
d:nth-child(-n + 4):before {
        background: #7c7c7c;
        animation-name: c22;
}
@keyframes c2 {
        to {background: #106c8a}
}
@keyframes c22 {
        to {background: #78ccdc}
}
d:after {
        transform-origin: right;
        transform: rotateY(-90deg);
        background: #242424;
        animation: c3 var(--d) calc(8s + var(--de)) var(--st) both;
}
@keyframes c3 {
        to {background: #00405b}
}
body {
        display: grid;
        grid-auto-flow: column;
        gap: calc(1.5*var(--s));
  transform-origin: top;
        animation: rot 8s linear both;
        cursor: pointer;
}
html:after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
        animation: htm .3s 8s forwards;
}
@keyframes htm {
        to {inset:0 0 100%}
}
@keyframes rot {
        0% {
  transform: perspective(800px) rotateY(-38deg) rotate(10deg) rotatex(-15deg) rotateY(-30deg) translate(-10%,20%);
        }
        to {
  transform: perspective(800px) rotateY(-38deg) rotate(10deg) rotatex(-15deg) rotateY(15deg) translate(-10%,20%);
        }
}
.\31 {
        animation: one 2s both 4s ease-in;
}
@keyframes one {0%{transform: translateY(-100vh)}}
.\31:after {
        animation: one-shad 2s both 4s ease-in;
}
@keyframes one-shad {0%,98%{opacity: 0}}
.\39 > d:nth-child(10) {
        --m:, m1 .5s 6s both ease-in;
}
@keyframes m1 {
        to{transform: translate(-100%,100%)}
}
.\39 > d:nth-child(11) {
        --m:, m2 .5s 6s both ease-in;
}
@keyframes m2 {
        to{transform: translate(-200%,200%)}
}

.\31 > d:nth-child(1),
.\39 > d:nth-child(-n + 4) {--y:calc(3*var(--s))}
.\31 > d:nth-child(2),
.\39 > d:nth-child(5),
.\39 > d:nth-child(6) {--y:calc(2*var(--s))}
.\31 > d:nth-child(3),
.\39 > d:nth-child(7),
.\39 > d:nth-child(8) {--y:calc(1*var(--s))}
.\31 > d:nth-child(5),
.\39 > d:nth-child(10),
.\39 > d:nth-child(13) {--y:calc(-1*var(--s))}
.\31 > d:nth-child(6),
.\39 > d:nth-child(11),
.\39 > d:nth-child(14) {--y:calc(-2*var(--s))}
.\31 > d:nth-child(7),
.\39 > d:nth-child(n + 15) {--y:calc(-3*var(--s))}

body > n:nth-child(2) 
d:is(:nth-child(1),:nth-child(5),:nth-child(7),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(15)) {--x:calc(-2*var(--s))}
body > n:nth-child(2) 
d:is(:nth-child(2),:nth-child(16)) {--x:calc(-3*var(--s))}
body > n:nth-child(2) 
d:is(:nth-child(3),:nth-child(17)) {--x:calc(-4*var(--s))}
body > n:nth-child(2) 
d:is(:nth-child(4),:nth-child(6),:nth-child(8),:nth-child(12),:nth-child(13),:nth-child(14),:nth-child(18)) {--x:calc(-5*var(--s))}

body > n:nth-child(3) 
d:is(:nth-child(1),:nth-child(5),:nth-child(7),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(15)) {--x:calc(-7*var(--s))}
body > n:nth-child(3) 
d:is(:nth-child(2),:nth-child(16)) {--x:calc(-8*var(--s))}
body > n:nth-child(3) 
d:is(:nth-child(3),:nth-child(17)) {--x:calc(-9*var(--s))}
body > n:nth-child(3) 
d:is(:nth-child(4),:nth-child(6),:nth-child(8),:nth-child(12),:nth-child(13),:nth-child(14),:nth-child(18)) {--x:calc(-10*var(--s))}

body > n:nth-child(4) 
d:is(:nth-child(1),:nth-child(5),:nth-child(7),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(15)) {--x:calc(-12*var(--s))}
body > n:nth-child(4) 
d:is(:nth-child(2),:nth-child(16)) {--x:calc(-13*var(--s))}
body > n:nth-child(4) 
d:is(:nth-child(3),:nth-child(17)) {--x:calc(-14*var(--s))}
body > n:nth-ch.........完整代码请登录后点击上方下载按钮下载查看