活字三维移动拼凑动画显示效果
代码语言:html
所属分类:动画
代码描述:活字三维移动拼凑动画显示效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: var(--grey-color-4); } *, *::after, *::before { box-sizing: border-box; transform-style: preserve-3d; } :root { --red-color: #ae2a4a; --grey-color-1: #979797; --grey-color-2: #959595; --grey-color-3: #e0dfe0; --grey-color-4: #dadada; } .cube { --cube-width: 3rem; --cube-height: 1rem; --cube-depth: 1.5rem; width: var(--cube-width); height: var(--cube-height); } .cube__front { width: var(--cube-width); height: var(--cube-height); transform-origin: bottom left; transform: rotateX(-90deg) translateZ(calc(calc(var(--cube-depth) * 2) - var(--cube-height))); } .cube__back { width: var(--cube-width); height: var(--cube-height); transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(calc(var(--cube-width) * -1)) translateY(calc(var(--cube-height) * -1)); } .cube__right { width: calc(var(--cube-depth) * 2); height: var(--cube-height); transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(var(--cube-width)) translateX(calc(var(--cube-depth) * -2)) translateY(calc(var(--cube-height) * -1)); } .cube__left { width: calc(var(--cube-depth) * 2); height: var(--cube-height); transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(calc(var(--cube-height) * -1)); } .cube__top { width: var(--cube-width); height: calc(var(--cube-depth) * 2); transform-origin: top left; transform: translateZ(var(--cube-height)); } .cube__bottom { width: var(--cube-width); height: calc(var(--cube-depth) * 2); transform-origin: top left; transform: rotateY(180deg) translateX(calc(var(--cube-width) * -1)); } .cube .face { position: absolute; border-radius: 4px; } .cube__front { background-color: var(--grey-color-1); } .cube__back { background-color: var(--grey-color-3); } .cube__right { background-color: var(--grey-color-1); } .cube__left { background-color: var(--grey-color-2); } .cube__top { background-color: var(--grey-color-3); overflow: hidden; } .cube__bottom { background-color: var(--grey-color-2); } .camera { perspective: 300px; transform: scale(3); } .board { --board-row: 4; --board-col: 6; position: relative; display: grid; grid-template-rows: repeat(var(--board-row), 1fr); grid-template-columns: repeat(var(--board-col), 1fr); width: 18rem; height: 12rem; transform: rotateX(45deg); } .clip { position: relative; display: flex; flex-direction: column; font-size: 4rem; line-height: 1; color: var(--red-color); user-select: none; } .clip-1 { text-align: right; left: 38%; } .clip-2 { right: 61%; } .clip-3 { text-align: right; left: 38%; bottom: 100%; } .clip-4 { right: 61%; bottom: 100%; } .clip-5 { text-align: right; left: 38%; bottom: 68%; } .clip-6 { right: 61%; bottom: 68%; } .clip-7 { text-align: right; left: 38%; bottom: 35%; } .clip-8 { right: 61%; bottom: 35%; } </style> </head> <body translate="no" > <div class="camera"> <div class="board"> <div class="cube"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"></div> <div class="face cube__bottom"></div> </div> <div class="cube cube-12"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"></div> <div class="face cube__bottom"></div> </div> <div class="cube cube-1"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"> <div class="clip clip-1"><span class="char-1">大</span></div> </div> <div class="face cube__bottom"></div> </div> <div class="cube cube-2"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"> <div class="clip clip-2"><span class="char-1">大</span></div> </div> <div class="face cube__bottom"></div> </div> <div class="cube"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"></div> <div class="face cube__bottom"></div> </div> <div class="cube"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"></div> <div class="face cube__bottom"></div> </div> <div class="cube"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"></div> <div class="face cube__bottom"></div> </div> <div class="cube cube-11"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"></div> <div class="face cube__bottom"></div> </div> <div class="cube cube-3"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"> <div class="clip clip-3"><span class="char-1">大</span><span class="char-2">前</span></div> </div> <div class="face cube__bottom"></div> </div> <div class="cube cube-4"> <div class="face cube__front"></div> <div class="face cube__back"></div> <div class="face cube__right"></div> <div class="face cube__left"></div> <div class="face cube__top"> <div class="clip clip-4"><span class="char-1">大</span><span class="char-2">前</span></div> </div> <div class="face cube__bottom"></div> </div> <div class="cube cube-13"> <div class="face cube__front"></div> <div class="face cube__back"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0