css实现三维齿轮旋转动画效果代码
代码语言：html
所属分类：三维
代码描述：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;
font-size: 10px;
perspective: 500px;
overflow: hidden;
}
*:not(:empty) {
transform-style: preserve-3d;
}
.gears {
position: relative;
-webkit-animation: sceneRotate 30s infinite linear;
animation: sceneRotate 30s infinite linear;
}
@-webkit-keyframes sceneRotate {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-180deg);
}
100% {
transform: rotateY(-360deg);
}
}
@keyframes sceneRotate {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-180deg);
}
100% {
transform: rotateY(-360deg);
}
}
.gear {
position: absolute;
-webkit-animation: gearRotate 30s infinite linear;
animation: gearRotate 30s infinite linear;
}
@-webkit-keyframes gearRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes gearRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.tooth {
position: absolute;
left: 0;
bottom: 0;
height: 27.5em;
transform-origin: bottom;
transform: rotateZ(var(--angle, 0deg));
}
.tooth:nth-child(1) {
--angle: 0deg;
}
.tooth:nth-child(2) {
--angle: 6deg;
}
.tooth:nth-child(3) {
--angle: 12deg;
}
.tooth:nth-child(4) {
--angle: 18deg;
}
.tooth:nth-child(5) {
--angle: 24deg;
}
.tooth:nth-child(6) {
--angle: 30deg;
}
.tooth:nth-child(7) {
--angle: 36deg;
}
.tooth:nth-child(8) {
--angle: 42deg;
}
.tooth:nth-child(9) {
--angle: 48deg;
}
.tooth:nth-child(10) {
--angle: 54deg;
}
.tooth:nth-child(11) {
--angle: 60deg;
}
.tooth:nth-child(12) {
--angle: 66deg;
}
.tooth:nth-child(13) {
--angle: 72deg;
}
.tooth:nth-child(14) {
--angle: 78deg;
}
.tooth:nth-child(15) {
--angle: 84deg;
}
.tooth:nth-child(16) {
--angle: 90deg;
}
.tooth:nth-child(17) {
--angle: 96deg;
}
.tooth:nth-child(18) {
--angle: 102deg;
}
.tooth:nth-child(19) {
--angle: 108deg;
}
.tooth:nth-child(20) {
--angle: 114deg;
}
.tooth:nth-child(21) {
--angle: 120deg;
}
.tooth:nth-child(22) {
--angle: 126deg;
}
.tooth:nth-child(23) {
--angle: 132deg;
}
.tooth:nth-child(24) {
--angle: 138deg;
}
.tooth:nth-child(25) {
--angle: 144deg;
}
.tooth:nth-child(26) {
--angle: 150deg;
}
.tooth:nth-child(27) {
--angle: 156deg;
}
.tooth:nth-child(28) {
--angle: 162deg;
}
.tooth:nth-child(29) {
--angle: 168deg;
}
.tooth:nth-child(30) {
--angle: 174deg;
}
.tooth:nth-child(31) {
--angle: 180deg;
}
.tooth:nth-child(32) {
--angle: 186deg;
}
.tooth:nth-child(33) {
--angle: 192deg;
}
.tooth:nth-child(34) {
--angle: 198deg;
}
.tooth:nth-child(35) {
--angle: 204deg;
}
.tooth:nth-child(36) {
--angle: 210deg;
}
.tooth:nth-child(37) {
--angle: 216deg;
}
.tooth:nth-child(38) {
--angle: 222deg;
}
.tooth:nth-child(39) {
--angle: 228deg;
}
.tooth:nth-child(40) {
--angle: 234deg;
}
.tooth:nth-child(41) {
--angle: 240deg;
}
.tooth:nth-child(42) {
--angle: 246deg;
}
.tooth:nth-child(43) {
--angle: 252deg;
}
.tooth:nth-child(44) {
--angle: 258deg;
}
.tooth:nth-child(45) {
--angle: 264deg;
}
.tooth:nth-child(46) {
--angle: 270deg;
}
.tooth:nth-child(47) {
--angle: 276deg;
}
.tooth:nth-child(48) {
--angle: 282deg;
}
.tooth:nth-child(49) {
--angle: 288deg;
}
.tooth:nth-child(50) {
--angle: 294deg;
}
.tooth:nth-child(51) {
--angle: 300deg;
}
.tooth:nth-child(52) {
--angle: 306deg;
}
.tooth:nth-child(53) {
--angle: 312deg;
}
.tooth:nth-child(54) {
--angle: 318deg;
}
.tooth:nth-child(55) {
--angle: 324deg;
}
.tooth:nth-child(56) {
--angle: 330deg;
}
.tooth:nth-child(57) {
--angle: 336deg;
}
.tooth:nth-child(58) {
--angle: 342deg;
}
.tooth:nth-child(59) {
--angle: 348deg;
}
.tooth:nth-child(60) {
--angle: 354deg;
}
.tooth > * {
position: absolute;
height: 5em;
}
.tooth .side1 {
left: -2.5em;
width: 2em;
transform-origin: right;
transform: translateY(-50%) rotateX(90deg) rotateY(-80deg);
background-image: linear-gradient(60deg, #ff8000, #ffe699);
}
.tooth .high {
left: -0.5em;
width: 1em;
transform: translateY(-50%) rotateX(90deg);
background-image: linear-gradient(60deg, #ff8000, #ffe699);
}
.tooth .side2 {
left: 0.5em;
width: 2em;
transform-origin: left;
transform: translateY(-50%) rotateX(90deg) rotateY(80deg);
background-image: linear-gradient(60deg, #ff8000, #ffe699);
}
.tooth .low {
bottom: 0;
width: 1em;
transform: translate(-50%, 50%) rotateX(90deg) rotateY(3deg) translateZ(25.6em);
background-image: linear-gradient(60deg, #ff8000, #ffe699);
}
.tooth .front, .tooth .back {
width: 4em;
height: 4em;
-webkit-clip-path: polygon(1.5em 0, 2.5em 0, 2.85em 1.9em, 4em 2em, 4em 100%, 0 100%, 0 2em, 1.15em 1.9em);
clip-path: polygon(1.5em 0, 2.5em 0, 2.85em 1.9em, 4em 2em, 4em 100%, 0 100%, 0 2em, 1.15em 1.9em);
background-image: radial-gradient(circle at 50% 27.5em, #ffaa33, #ffcc66);
}
.tooth .front {
transform: translateX(-50%) translateZ(2.5em);
}
.tooth .back {
transform: translateX(-50%) translateZ(-2.5em);
}
.tooth .bottom1, .tooth .bottom2 {
height: 1.6666666667em;
bottom: 0;
width: 2.5em;
}
.tooth .bottom1 {
transform: translate(-50%, 50%) rotateX(90deg) translateY(1.6666666667em) translateZ(23.5em);
background-image: linear-gradient(#ff8000, #ffe699);
}
.tooth .bottom2 {
transform: translate(-50%, 50%) rotateX(90deg) translateY(-1.6666666667em) translateZ(23.5em);
background-image: linear-gradient(#ffe699, #ff8000);
}
.tooth .bottomFront, .tooth .bottomBack {
width: 2.5em;
height: 2em;
background-image: linear-gradient(#ffaa33, #ffcc66);
}
.tooth .bottomFront {
transform: translateX(-50%) translateY(4em) translateZ(0.8333333333em);
}
.tooth .bottomBack {
transform: translateX(-50%) translateY(4em) translateZ(-0.8333333333em);
}
.tooth .bottomHigh {
bottom: 0;
width: 2.5em;
height: 1.6666666667em;
transform: translate(-50%, 50%) rotateX(90deg) translateZ(21.5em);
background-image: linear-gradient(#ffe699, #ffcc66, #ffe699);
}
.big .front, .big .back {
width: 4em;
height: 21em;
-webkit-clip-path: polygon(1.5em 0, 2.5em 0, 2.85em 1.9em, 4em 2em, 3em 4em, 3em 100%, 1em 100%, 1em 4em, 0 2em, 1.15em 1.9em);
clip-path: polygon(1.5em 0, 2.5em 0, 2.85em 1.9em, 4em 2em, 3em 4em, 3em 100%, 1em 100%, 1em 4em, 0 2em, 1.15em 1.9em);
}
.big .longLeftFront, .big .longRightFront, .big .longLeftBack, .big .longRightBack {
top: 3em;
width: 1.6666666667em;
height: 20em;
}
.big .longLeftFront, .big .longRightFront {
left: -1em;
}
.big .longLeftBack, .big .longRightBack {
left: 1em;
}
.big .longLeftFront, .big .longLeftBack {
transform: translateX(-50%) rotateY(90deg) translateX(1.6666666667em);
background-image: linear-gradient(92deg, #ff8000, #ffe699);
}
.big .longRightFront, .big .longRightBack {
transform: translateX(-50%) rotateY(90deg) translateX(-1.6666666667em);
background-image: linear-gradient(88deg, #ffe699, #ff8000);
}
.long .bottomFront, .long .bottomBack {
height: 17em;
background-image: linear-gradient(#ffaa33, #ffcc66 2em);
}
.long .longLeft, .long .longRight {
top: 4em;
width: 1.6666666667em;
height: 17em;
background-image: linear-gradient(90deg, #ffe699, #ffcc66, #ffe699);
}
.long .longLeft {
transform: translateX(-50%) rotateY(90deg) translateZ(-1.25em);
}
.long .longRight {
transform: translateX(-50%) rotateY(90deg) translateZ(1.25em);
}
.inner {
position: absolute;
width: 4.53em;
height: 4em;
background-color: #f007;
transform: translate(-50%, -50%) rotateZ(var(--angle)) translateY(-5em);
}
.inner:nth-child(61) {
--angle: 0deg;
}
.inner:nth-child(62) {
--angle: 36deg;
}
.inner:nth-child(63) {
--angle: 72deg;
}
.inner:nth-child(64) {
--angle: 108deg;
}
.inner:nth-child(65) {
--angle: 144deg;
}
.inner:nth-child(66) {
--angle: 180deg;
}
.inner:nth-child(67) {
--angle: 216deg;
}
.inner:nth-child(68) {
--angle: 252deg;
}
.inner:nth-child(69) {
--angle: 288deg;
}
.inner:nth-child(70) {
--angle: 324deg;
}
.inner .front, .inner .back {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(circle at 50% 7em, #ffcc66 5em, #ffaa33);
}
.inner .front {
transform: translateZ(2.5em);
}
.inner .back {
transform: translateZ(-2.5em);
}
.inner .top, .inner .bottom {
position: absolute;
left: 50%;
height: 5em;
transform: translate(-50%, -50%) rotateX(90deg);
background-image: linear-gradient(#ffe699, #ffcc66, #ffe699);
}
.inner .top {
top: 0%;
width: 4.55em;
}
.inner .bottom {
top: 100%;
width: 2em;
}
</style>
</head>
<body>
<div class="gears">
<div class="gear">
<div class="tooth big">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="longLeftFront"></div>
<div class="longRightFront"></div>
<div class="longLeftBack"></div>
<div class="longRightBack"></div>
</div>
<div class="tooth long">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="longRight"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth long">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="longLeft"></div>
</div>
<div class="tooth big">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="longLeftFront"></div>
<div class="longRightFront"></div>
<div class="longLeftBack"></div>
<div class="longRightBack"></div>
</div>
<div class="tooth long">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="longRight"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="bottomHigh"></div>
</div>
<div class="tooth long">
<div class="front"></div>
<div class="back"></div>
<div class="side1"></div>
<div class="high"></div>
<div class="side2"></div>
<div class="low"></div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<div class="bottomFront"></div>
<div class="bottomBack"></div>
<div class="longLeft"></div>
</div>
<div class="tooth .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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