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

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

代码语言：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(-38d.........完整代码请登录后点击上方下载按钮下载查看