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-child(4) 
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(-15*var(--s))}

body > n:nth-child(5) 
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(-17*var(--s))}
body > n:nth-child(5) 
d:is(:nth-child(2),:nth-child(16)) {--x:calc(-18*var(--s))}
body > n:nth-child(5) 
d:is(:nth-child(3),:nth-child(17)) {--x:calc(-19*var(--s))}
body > n:nth-child(5) 
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(-20*var(--s))}

body:before {
  content: "";
  position: absolute;
  inset: auto -120% 0;
  aspect-ratio: 1;
  background: 
	 radial-gradient(#d3d4d4a6, #000 50%),
   conic-gradient(from 90deg at 2px 2px,#0000 25%,#3f3f3f 0) 0 0/3em 3em;
  transform: rotateX(90deg) translateY(50%);
  transform-origin: bottom;
	pointer-events: none;
}
body:after {
  content: "Click to explode!!\A ⬇";
  text-align: center;
  position: absolute;
  color: #fff;
  font-size: 40px;
  font-family: sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  left: 57%;
  white-space: pre;
  transform: translate(-50%,-160%);
	pointer-events: none;
	animation: 
		p .8s infinite linear,
		surprise 1.5s 10s both;
}
body.rick:after {
	content:"Boom!! 🥳"
}
@keyframes surprise {
	from {opacity:0;}
}
@keyframes p {
	50% {translate: 0% 10%}
}
.twitter {
  --c: #56bacc;
	--s: 250px;
  width: var(--s);
  background: 
    linear-gradient(var(--c) 0 0) 66% 67.5%/14% 25% no-repeat,
    radial-gradient(circle at 82% 48%,var(--c) 20%,#0000 20.5%),
    radial-gradient(circle at 19% -33%,#0000 56%,var(--c) 0) 0 100%/100% 50% no-repeat;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%) rotateX(90deg) translateY(90%) translateZ(-1px);
  transform-origin: bottom;
	animation: t .5s 8s both;
	filter: 
		drop-shadow(var(--s) 0 0 var(--c)) 
		drop-shadow(calc(2*var(--s)) 0 0 var(--c)) 
		drop-shadow(calc(-4*var(--s)) 0 0 var(--c)) 
		drop-shadow(0 var(--s) 0 var(--c)) 
		drop-shadow(0 calc(2*var(--s)) 0 var(--c)) 
		drop-shadow(0 calc(-4*var(--s)) 0 var(--c));
    z-index: -9;
}
@keyframes t {
	from{opacity: 0}
}

.twitter *,
.twitter,
:is(.twitter *,.twitter):before,
:is(.twitter *,.twitter):after {
  content:"&q.........完整代码请登录后点击上方下载按钮下载查看