div+css实现三维立体代码方块标识符旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:div+css实现三维立体代码方块标识符旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #111; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 2000px; overflow: hidden; } body *:not(:empty) { transform-style: preserve-3d; } .code { position: relative; font-size: 50px; -webkit-animation: rotate 20s infinite ease-in-out; animation: rotate 20s infinite ease-in-out; } @-webkit-keyframes rotate { 0% { transform: skewX(0deg) rotateX(0deg) rotateY(0deg); } 50% { transform: skewX(-30deg) rotateX(360deg) rotateY(720deg); } 100% { transform: skewX(0deg) rotateX(720deg) rotateY(1440deg); } } @keyframes rotate { 0% { transform: skewX(0deg) rotateX(0deg) rotateY(0deg); } 50% { transform: skewX(-30deg) rotateX(360deg) rotateY(720deg); } 100% { transform: skewX(0deg) rotateX(720deg) rotateY(1440deg); } } .code * { position: absolute; } .lt { left: -4em; } .lt-top { bottom: 0; width: 2em; height: 3em; transform: translateX(-50%) skewX(-30deg); } .lt-bottom { width: 2em; height: 3em; transform: translateX(-50%) skewX(30deg); } .slash { width: 2em; height: 8em; transform: translate(-50%, -50%) skewX(-15deg); } .gt { left: 4em; } .gt-top { bottom: 0; width: 2em; height: 3em; transform: translateX(-50%) skewX(30deg); } .gt-bottom { width: 2em; height: 3em; transform: translateX(-50%) skewX(-30deg); } .front, .back, .left, .right, .top, .bottom { width: 100%; height: 100%; box-shadow: 0 0 0.5em #000 inset; background-color: hsl(200, 30%, var(--light)); } .front { --light: 80%; transform: translateZ(1em); } .back { --light: 85%; transform: rotateY(180deg) translateZ(1em); } .right { --light: 70%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0