div+css实现立体数字文字效果代码
代码语言：html
所属分类：其他
代码描述：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>
<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>
<div class="side"></div>
</div>
<div class="cuboid two-4">
<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-5">
<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>
<div class="number five">
<div class="cuboid five-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 five-2">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0