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

代码语言:html

所属分类:布局界面

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

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

网友评论0