css实现三维3d游乐场旋转木马动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现三维3d游乐场旋转木马动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
}
@property --jump {
initial-value: 0%;
syntax: '<percentage>';
inherits: false;
}
@property --spin {
initial-value: 0deg;
syntax: '<angle>';
inherits: false;
}
@property --hue {
initial-value: 0;
syntax: '<number>';
inherits: false;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background: var(--bg);
overflow: hidden;
}
:root {
--bg: #121921;
--height: 16;
--width: 20;
--speed: 5;
--horseSpeed: 2;
--horseSize: 5;
--base-depth: 10;
--pillar-depth: 4;
--pillar: #8c8c8c;
--window: #fcf7e8;
--sill: #e6b319;
--lights: #fff;
--primary: #b447eb;
--secondary: #fafafa;
--base-coefficient: 0.75vmin;
--base-height: 20;
--base-hole: 0.6vmin;
--base-stripe: 3.9;
}
.carousel {
height: calc(var(--height) * 1vmin);
width: calc(var(--width) * 1vmin);
transform: translate(-50%, -50%) rotateX(-15deg) rotateY(40deg);
position: absolute;
top: 50%;
left: 50%;
}
.carousel__core {
bottom: -10%;
height: 110%;
left: 50%;
position: absolute;
transform: translate(-50%, 0);
width: calc(var(--width) * 0.2vmin);
}
.carousel__core div {
background: var(--pillar);
height: 100%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%) rotateY(calc(((-360 / var(--sides)) * var(--side)) * 1deg)) translate3d(0, 0, calc((var(--width) * 0.4) * 0.75vmin)) rotateY(180deg);
width: 100%;
filter: brightness(0.9);
}
.carousel__core div:nth-of-type(even) {
filter: brightness(1);
}
.carousel__core div:nth-of-type(even):after {
background: var(--window);
border: 2px solid var(--sill);
border-radius: 35% 35% 0 0;
content: '';
height: 20%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, 0%);
width: 60%;
}
.carousel__light {
width: 15%;
height: 15%;
position: absolute;
background: hsl(var(--hue, 0), 90%, 80%);
filter: blur(10px), brightness(1.1);
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
-webkit-animation: party calc(var(--party-speed, 1) * 1s) calc(var(--delay, 1) * -1s) infinite linear;
animation: party calc(var(--party-speed, 1) * 1s) calc(var(--delay, 1) * -1s) infinite linear;
}
.carousel__lightring {
position: absolute;
top: 100%;
left: 50%;
background: #fcf1cf;
border-radius: 50%;
filter: blur(4vmin);
height: calc(var(--width) * 2.3vmin);
width: calc(var(--width) * 2.3vmin);
transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * -0.1vmin));
}
.carousel__horses {
-webkit-animation: spin calc(var(--speed) * 1s) infinite linear;
animation: spin calc(var(--speed) * 1s) infinite linear;
height: 100%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%) rotateY(var(--spin));
width: 100%;
z-index: 5;
}
.carousel__horse {
--depth: calc(var(--width) * var(--depth-coefficient));
-webkit-animation: jump calc(var(--horseSpeed) * 1s) calc((var(--horseSpeed) * var(--delay)) * 1s) infinite linear both;
animation: jump calc(var(--horseSpeed) * 1s) calc((var(--horseSpeed) * var(--delay)) * 1s) infinite linear both;
font-size: calc(var(--horseSize) * 1vmin);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, var(--jump)) rotateY(calc(((-360 / var(--horses)) * var(--horse)) * 1deg)) translate3d(0, 0, calc(var(--depth) * 1vmin)) rotateY(180deg);
}
.carousel__horse:nth-of-type(even) {
--depth: calc(var(--width) * var(--depth-coefficient));
}
.carousel__base {
-webkit-animation: spin calc(var(--speed) * 1s) infinite linear;
animation: spin calc(var(--speed) * 1s) infinite linear;
left: 50%;
position: absolute;
top: 100%;
transform: translate(-50%, -50%) rotateY(var(--spin));
height: 20%;
}
.carousel__base-side {
--bg: var(--primary);
height: calc(var(--base-depth) * 1vmin);
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%, 0) rotateY(calc(((-360 / var(--sides)) * var(--side)) * 1deg)) rotateX(90deg) translate3d(0, calc(var(--width) * var(--base-hole)), 0);
transform-origin: 50% 0%;
width: calc(var(--width) * 0.35vmin);
}
.carousel__base-side:nth-of-type(even) {
--bg: var(--secondary);
}
.carousel__side {
height: 100%;
width: 100%;
background: var(--bg);
position: absolute;
}
.carousel__side--top {
-webkit-clip-path: polygon(23% 0, 77% 0, 100% 100%, 0 100%);
clip-path: polygon(23% 0, 77% 0, 100% 100%, 0 100%);
filter: brightness(1.2);
}
.carousel__side--inner {
display: block;
height: calc(var(--height) * 0.2vmin);
background: var(--bg);
filter: brightness(0.8);
top: 0;
left: 50%;
transform-origin: 50% 0;
transform: translate(-50%, 0) rotateX(-90deg);
}
.carousel__side--outer {
display: block;
height: calc(var(--height) * 0.2vmin);
background: var(--bg);
filter: brightness(1);
top: 100%;
left: 50%;
transform-origin: 50% 0;
transform: translate(-50%, 0) rotateX(-90deg);
}
.carousel__hat {
-webkit-animation: spin calc(var(--speed) * 1s) infinite linear;
animation: spin calc(var(--speed) * 1s) infinite linear;
bottom: 100%;
height: 150%;
left: 50%;
position: absolute;
transform: translate(-50%, 40%) rotateY(var(--spin));
width: 500%;
}
.carousel__hat-segment {
--bg: var(--primary);
height: 110%;
width: calc(var(--width) * 0.43vmin);
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%, 0) rotateY(calc(((-360 / var(--sides)) * var(--side)) * 1deg)) rotateX(65deg);
transform-origin: top center;
}
.carousel__hat-segment:nth-of-type(even) {
--bg: var(--secondary);
}
.carousel__segment--main {
background: var(--bg);
filter: brightness(1.2);
-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
height: 100%;
width: 100%;
}
.carousel__segment--dress {
filter: brightness(0.75);
background: var(--bg);
height: 30%;
position: absolute;
top: 100%;
left: 50%;
border-radius: 50%;
width: 100%;
transform: translate(-50%, -50%) rotateX(-65deg);
-webkit-clip-path: inset(50% 0 0 0);
clip-path: inset(50% 0 0 0);
}
@-webkit-keyframes spin {
to {
--spin: 360deg;
}
}
@keyframes spin {
to {
--spin: 360deg;
}
}
@-webkit-keyframes jump {
50% {
--jump: -50%;
}
}
@keyframes jump {
50% {
--jump: -50%;
}
}
@-webkit-keyframes party {
to {
--hue: 359;
}
}
@keyframes party {
to {
--hue: 359;
}
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel__lightring"></div>
<div class="carousel__horses" style="--horses: 10">
<div class="carousel__horse" style="--horse: 0; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 1; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 2; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 3; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 4; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 5; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 6; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 7; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 8; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 9; --delay: 0; --depth-coefficient: 1">🎠</div>
<div class="carousel__horse" style="--horse: 10; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 11; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 12; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 13; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 14; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 15; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 16; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 17; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 18; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
<div class="carousel__horse" style="--horse: 19; --delay: -0.5; --depth-coefficient: 0.75">🎠</div>
</div>
<div class="carousel__base" style="--sides: 20">
<div class="carousel__base-side" style="--side: 0; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel__side carousel__side--inner"></div>
<div class="carousel__side carousel__side--outer">
<div class="carousel__light"></div>
</div>
</div>
<div class="carousel__base-side" style="--side: 1; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel__side carousel__side--inner"></div>
<div class="carousel__side carousel__side--outer">
<div class="carousel__light"></div>
</div>
</div>
<div class="carousel__base-side" style="--side: 2; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel__side carousel__side--inner"></div>
<div class="carousel__side carousel__side--outer">
<div class="carousel__light"></div>
</div>
</div>
<div class="carousel__base-side" style="--side: 3; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel__side carousel__side--inner"></div>
<div class="carousel__side carousel__side--outer">
<div class="carousel__light"></div>
</div>
</div>
<div class="carousel__base-side" style="--side: 4; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel__side carousel__side--inner"></div>
<div class="carousel__side carousel__side--outer">
<div class="carousel__light"></div>
</div>
</div>
<div class="carousel__base-side" style="--side: 5; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel__side carousel__side--inner"></div>
<div class="carousel__side carousel__side--outer">
<div class="carousel__light"></div>
</div>
</div>
<div class="carousel__base-side" style="--side: 6; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel__side carousel__side--inner"></div>
<div class="carousel__side carousel__side--outer">
<div class="carousel__light"></div>
</div>
</div>
<div class="carousel__base-side" style="--side: 7; --delay: 0;">
<div class="carousel__side carousel__side--top"></div>
<div class="carousel_.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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