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);
	backgrou.........完整代码请登录后点击上方下载按钮下载查看