div+css实现数字文字立体视觉跟随鼠标交互动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现数字文字立体视觉跟随鼠标交互动画效果代码动画效果代码
代码标签: div css 数字 文字 立体 视觉 跟随 鼠标 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap'); :root { --shadow: #894ff1; --bounce: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%); } *, *:before, *:after { box-sizing: border-box; transform-style: preserve-3d; } body { margin: 0; width: 100vw; height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 0%, #212121 5vmax, #000); font-family: 'Black Ops One', sans-serif; } .container { width: 100vw; height: 100vh; display: flex; flex-direction: column; animation: color-hue 20s linear 0s infinite; justify-content: center; align-items: center; } @keyframes color-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(-360deg); } } @keyframes grow-txt { 0% { letter-spacing: -8.5vmin; } 100% { letter-spacing: 0.75vmin; } } .thanks, .followers { font-size: 13vmin; text-align: center; color: #ac84f7; height: 20vmin; text-transform: uppercase; letter-spacing: -8.5vmin; animation: grow-txt 3s var(--bounce) 0.9s 1; animation-fill-mode: forwards; transition: all 1.5s ease 0.5s; text-shadow: 0vmin 0vmin 0.25vmin #fff, -0.1vmin 0.125vmin 0.25vmin var(--shadow), -0.2vmin 0.25vmin 0.25vmin var(--shadow), -0.4vmin 0.5vmin 0.25vmin #7f49e1, -0.6vmin 0.75vmin 0.25vmin #7442cf, -0.8vmin 1vmin 0.25vmin #6a3cbd, -1vmin 1.25vmin 0.25vmin #6036ad, -1.2vmin 1.5vmin 0.25vmin #57319d, -1.4vmin 1.75vmin 0.25vmin #4a2787, -1.6vmin 2vmin 0.25vmin #402275, -1.8vmin 2.25vmin 0.25vmin #391e67, -2vmin 2.5vmin 0.25vmin #301957, -2.2vmin 2.75vmin 0.25vmin #271447, -2.4vmin 3vmin 0.25vmin #1d0f35, -2.6vmin 3.25vmin 5.5vmin #673AB7; } .thanks { filter: hue-rotate(-25deg) brightness(1.5); transform: rotateY(25deg) rotateX(45deg) translateX(-6vmin); padding: 3vmin; word-spacing: 8vmin; } .followers { filter: hue-rotate(25deg) brightness(1.5); transform: rotateY(25deg) rotateX(45deg) translateX(9vmin) translateY(0vmin); padding: 0; } .thanks:hover, .followers:hover { color: #fff7; transition: all 0.75s ease 0s; } @keyframes tilt { 0%, 100% { transform: rotateX(0deg);} 15%, 50% { transform: rotateX(30deg);} 65%, 75% { transform: rotateX(-30deg);} } .numbers { height: 30vh; display: flex; justify-content: center; animation: tilt 2s var(--bounce) 2s 1; transition: all 1s var(--bounce) 0s; transform: rotateX(0deg) rotateZ(0deg) rotateZ(0deg); } .numbers:hover { transform: rotateX(25deg) rotateZ(25deg) rotateZ(-25deg); } .numbers:hover .number { transform: rotateY(-15deg) rotateZ(-5deg) rotateX(0deg); transition: all 1s ease 0s; } .numbers:hover .cuboid .side:first-child { background: hsl(var(--hue), var(--sat), 60%); } .numbers:hover .cuboid .side:last-child { background: hsl(var(--hue), var(--sat), 90%); } .number { display: flex; justify-content: center; align-items: center; animation: grow 3s var(--bounce) 0.9s 1; animation-fill-mode: forwards; } @keyframes grow { 0% { width: 0; } 100% { width: 22vmin; } } .cuboid { --height: 5; --width: 5; --depth: 5; --hue: 260; --sat: 60%; height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1vmin); position: absolute; animation: cube1 0.6s linear 0s infinite; transform: translate3d(0vmin, 0vmin, 0vmin); } .cuboid .side { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; border-radius: 2px; box-shadow: 0 0 20px 0 #280a4c inset; box-shadow: 0 0 3vmin 0 #fff2 inset, 0 0 5vmin 0 #0002 inset; transition: all 1s ease 0s; } .cuboid .side:nth-of-type(1) { transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)); background: hsl(var(--hue), var(--sat), 90%); } .cuboid .side:nth-of-type(2) { transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg); background: hsl(var(--hue), var(--sat), 25%); } .cuboid .side:nth-of-type(3) { width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin)); background: hsl(var(--hue), var(--sat), 75%); } .cuboid .side:nth-of-type(4) { width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin)); background: hsl(var(--hue), var(--sat), 40%); } .cuboid .side:nth-of-type(5) { height: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin)); background: hsl(var(--hue), var(--sat), 75%); } .cuboid .side:nth-of-type(6) { height: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin)); background: hsl(var(--hue), var(--sat), 20%); } .cuboid .side:nth-of-type(2):before { content: ""; position: absolute; width: 100%; height: 100%; background: var(--shadow); transform: translateZ(5vmin) translateY(-2vmin); box-shadow: 0 0 1vmin 0 #fff3; filter: blur(2vmin); opacity: 0.25; } .two-1, .five-1, .zero-1 { --width: 15; transform: rotateY(25deg) rotateX(45deg) translate3d(0vmin, -10vmin, 5vmin); } .two-2, .five-2, .zero-2, .zero-3 { transform: rotateY(25deg) rotateX(45deg) translate3d(5vmin, -2.5vmin, 5vmin); --height: 10; } .two-3, .five-3 { --width: 15; transform: rotateY(25deg) rotateX(45deg) translate3d(0vmin, 0vmin, 0vmin); } .two-4, .five-4, .zero-6 { transform: rotateY(25deg) rotateX(45deg) translate3d(-5vmin, 2.5vmin, -5vmin); --height: 10; } .two-5, .five-5 { --width: 15; transform: rotateY(25deg) rotateX(45deg) translate3d(0vmin, 10vmin, -5vmin); } .five-2, .zero-2 { transform: rotateY(25deg) rotateX(45deg) translate3d(-5vmin, -2.5vmin, 5vmin); } .five-4 { transform: rotateY(25deg) rotateX(45deg) translate3d(5vmin, 7.5vmin, 0vmin); } .zero-4 { transform: rotateY(25deg) rotateX(45deg) translate3d(-5vmin, 0vmin, 0vmin); } .zero-5 { transform: rotateY(25deg) rotateX(45deg) translate3d(5vmin, 0vmin, 0vmin); } .zero-7 { transform: rotateY(25deg) rotateX(45deg) translate3d(5vmin, 2.5vmin, -5vmin); --height: 10; } .zero-8 { --width: 15; transform: rotateY(25deg) rotateX(45deg) translate3d(0vmin, 10vmin, -5vmin); } </style> </head> <body translate="no"> <div class="container"> <div class="thanks">Thank You</div> <div class="numbers"> <div class="number two"> <div class="cuboid two-1"><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div></div> <div class="cuboid two-2"><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div></div> <div class="cuboid two-3"><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div>&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0