css布局三维模拟苏伊士运河货轮搁浅动画效果代码
代码语言：html
所属分类：三维
代码描述：css布局三维模拟苏伊士运河货轮搁浅动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap");
.cuboid {
width: 100%;
height: 100%;
position: relative;
}
.cuboid__side:nth-of-type(1) {
height: calc(var(--thickness) * 1vmin);
width: 100%;
position: absolute;
top: 0;
transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
height: 100%;
width: calc(var(--thickness) * 1vmin);
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
width: 100%;
height: calc(var(--thickness) * 1vmin);
position: absolute;
bottom: 0;
transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
height: 100%;
width: calc(var(--thickness) * 1vmin);
position: absolute;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
position: absolute;
top: 0;
left: 0;
}
.cuboid__side:nth-of-type(6) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--sky);
overflow: hidden;
perspective: 100vh;
}
label {
height: calc(var(--boat-height) * 0.4);
font-family: 'Teko', sans-serif;
color: #ebebeb;
letter-spacing: 0.1vmin;
transform: translate3d(0, 0, calc(var(--boat-depth) * 0.51vmin));
top: 55%;
left: 36%;
font-size: calc(var(--boat-height) * 0.4);
display: block;
}
label img {
height: 65%;
position: absolute;
left: 100%;
top: 50%;
-o-object-fit: cover;
object-fit: cover;
filter: saturate(0.5);
transform: translate(50%, -50%) rotate(30deg);
}
.scene {
transform: translate3d(-50%, -50%, 0) rotateX(-16deg) rotateY(5deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
height: var(--boat-width);
width: var(--boat-width);
position: fixed;
top: 50%;
left: 50%;
}
:root {
--base-size: 14;
--boat-height: calc(var(--base-size) * 0.7vmin);
--boat-width: calc(var(--boat-height) * 4);
--boat-depth: var(--base-size);
--canal-one: #125ca5;
--canal-two: #0d6677;
--boat-one: #243842;
--boat-two: #1e3038;
--boat-three: #17242b;
--boat-four: #121c21;
--white-one: #fafafa;
--white-two: #f0f0f0;
--white-three: #e0e0e0;
--white-four: #d6d6d6;
--red: #731e0d;
--dirt: #c2ad70;
--sky: #d1e5fa;
}
.skiff__container {
height: calc(var(--base-size) * 0.16vmin);
width: calc(var(--base-size) * 0.32vmin);
top: calc(50% + (var(--boat-height) * 0.5));
position: absolute;
left: 70%;
transform: translate3d(-50%, -100%, calc(var(--boat-depth) * 1.5vmin)) rotateY(0deg);
-webkit-animation: circle 1s infinite linear;
animation: circle 1s infinite linear;
}
.skiff__container:after {
content: '';
height: calc(var(--boat-depth) * 1.23vmin);
width: calc(var(--boat-depth) * 1.23vmin);
border-radius: 50%;
border: calc(var(--base-size) * 0.18vmin) double rgba(191,248,248,0.15);
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px);
}
.skiff {
height: 100%;
width: 100%;
position: relative;
transform: translate3d(0, 0, calc(var(--boat-depth) * 0.5vmin));
}
.skiff__body {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
}
.skiff__hold {
position: absolute;
bottom: 30%;
left: 10%;
width: 40%;
height: 20%;
}
.skiff__cabin {
position: absolute;
bottom: 30%;
right: 16%;
width: 40%;
height: 60%;
}
.skiff__motor {
position: absolute;
left: 0;
height: 20%;
width: 10%;
bottom: 30%;
}
.canal {
height: 200vmax;
width: calc(var(--boat-width) * 1.12);
background: linear-gradient(90deg, var(--canal-two) 0 5%, var(--canal-one), var(--canal-two) 95% 100%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--boat-height) * -0.5));
}
.canal:after {
content: '';
height: 100%;
width: 10000%;
background: var(--dirt);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, -2px);
z-index: -1;
}
.boat {
--ratio: 3.5;
height: var(--boat-height);
width: var(--boat-width);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateY(20deg) rotate(-2deg);
}
.boat * {
position: absolute;
}
.boat__body {
bottom: 0;
left: 0;
width: 100%;
height: 45%;
}
.boat__container {
bottom: 45%;
height: 55%;
}
.boat__container--back {
left: 1%;
width: calc(var(--ratio) * 4%);
}
.boat__container--middle {
left: calc((var(--ratio) * 5%) + 1%);
width: calc(var(--ratio) * 12%);
}
.boat__container--front {
left: calc((var(--ratio) * 18%) + 1%);
width: calc(var(--ratio) * 8%);
}
.boat__tower {
height: 70%;
width: calc(var(--ratio) * 1%);
bottom: 45%;
}
.boat__tower--back {
left: calc((var(--ratio) * 4%) + 1%);
}
.boat__tower--front {
height: 80%;
left: calc((var(--ratio) * 17%) + 1%);
}
.cuboid--body {
--thickness: var(--boat-depth);
}
.cuboid--body div {
background: var(--boat-one);
}
.cuboid--body div:nth-of-type(2) {
background: var(--boat-two);
}
.cuboid--body div:nth-of-type(4) {
background: repeating-linear-gradient(90deg, var(--boat-three) 0 15%, transparent 15% 20%) 50% 10%/80% 16% no-repeat, var(--boat-two);
}
.cuboid--body div:nth-of-type(4):after {
content: '';
position: absolute;
height: 30%;
width: 30%;
background: linear-gradient(var(--white-four), var(--white-four)) 50% 0/100% 35% no-repeat, linear-gradient(var(--white-four), var(--white-four)) 50% 100%/60% 35% no-repeat;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cuboid--body div:nth-of-type(3) {
background: linear-gradient(90deg, var(--red) 0 94%, transparent 94%);
}
.cuboid--body div:nth-of-type(5) {
background: linear-gradient(90deg, var(--boat-four) 0 80%, transparent 80%);
overflow: hidden;
}
.cuboid--body div:nth-of-type(5):after {
content: '';
transform-origin: 100% 0;
width: 150%;
height: 200%;
background: var(--boat-four);
position: absolute;
top: 0;
right: 0;
transform: rotate(28deg);
}
.cuboid--body div:nth-of-type(5):before {
content: '';
height: 10%;
width: 95%;
left: 0;
bottom: 0;
position: absolute;
background: var(--red);
z-index: 2;
transform: skewX(-30deg) translate(-1%, 0);
}
.cuboid--body div:nth-of-type(6) {
background: linear-gradient(270deg, var(--boat-four) 0 80%, transparent 80%);
overflow: hidden;
}
.cuboid--body div:nth-of-type(6):after {
content: '';
transform-origin: 0 0;
width: 150%;
height: 200%;
background: var(--boat-four);
position: absolute;
top: 0;
left: 0;
transform: rotate(-28deg);
}
.cuboid--body div:nth-of-type(6):before {
content: '';
height: 10%;
width: 95%;
right: 0;
bottom: 0;
position: absolute;
background: var(--red);
z-index: 2;
transform: skewX(30deg) translate(1%, 0);
}
.cuboid--body div:nth-of-type(2) {
background: transparent;
}
.cuboid--body div:nth-of-type(2):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 112%;
background: var(--boat-two);
transform-origin: 50% 0;
transform: rotateX(-28deg);
}
.cuboid--container {
--thickness: var(--boat-depth);
}
.cuboid--container div:nth-of-type(1),
.cuboid--container div:nth-of-type(4),
.cuboid--container div:nth-of-type(5) {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
grid-template-rows: repeat(var(--rows), 1fr);
}
.cuboid--container div:nth-of-type(1) {
--lightness: 70;
}
.cuboid--container div:nth-of-type(4) {
--lightness: 60;
}
.cuboid--container div:nth-of-type(5) {
--lightness: 40;
}
.container {
background: hsl(var(--hue, 0), 50%, calc(var(--lightness, 50) * 1%));
position: static;
}
.cuboid--tower {
--thickness: calc(var(--base-size) * 0.25);
}
.cuboid--tower div {
background: var(--white-two);
}
.cuboid--tower div:nth-of-type(1) {
background: #262626;
}
.cuboid--tower div:nth-of-type(5) {
background: linear-gradient(#a3ccf5, #a3ccf5) 50% 8%/80% 10% no-repeat, linear-gradient(#333 0 5%, var(--white-three) 5%);
}
.cuboid--tower div:nth-of-type(4) {
background: linear-gradient(#a3ccf5, #a3ccf5) 50% 8%/80% 10% no-repeat, linear-gradient(#333 0 5%, var(--white-one) 5%);
}
.cuboid--tower-front div {
background: var(--white-four);
}
.cuboid--tower-front div:nth-of-type(1) {
background: var(--white-one);
}
.cuboid--tower-front div:nth-of-type(1):after {
content: '';
position: absolute;
height: 500%;
width: 100%;
background: rgba(255,255,255,0.4);
border: calc(var(--boat-width) * 0.01) solid var(--white-two);
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, calc(var(--boat-height) * -0.15));
}
.cuboid--tower-front div:nth-of-type(5):after,
.cuboid--tower-front div:nth-of-type(6):after {
content: '';
position: absolute;
bottom: 0;
height: 130%;
width: 100%;
transform-origin: 50% 100%;
transform: rotateX(-45deg);
background: rgba(255,255,255,0.4);
border: calc(var(--boat-width) * 0.01) solid var(--white-one);
}
.cuboid--skiff-body {
--thickness: calc(var(--base-size) * 0.16);
}
.cuboid--skiff-body div {
background: var(--boat-one);
}
.cuboid--skiff-body div:nth-of-type(3) {
background: var(--boat-two);
}
.cuboid--skiff-body div:nth-of-type(4) {
background: var(--boat-four);
}
.cuboid--skiff-body div:nth-of-type(5) {
background: var(--boat-three);
}
.cuboid--skiff-cabin {
--thickness: calc(var(--base-size) * 0.12);
}
.cuboid--skiff-cabin div {
--base: var(--white-two);
background: linear-gradient(#a3ccf5, #a3ccf5) 50% 12%/80% 30% no-repeat, var(--base);
}
.cuboid--skiff-cabin div:nth-of-type(1) {
background: var(--boat-three);
}
.cuboid--skiff-cabin div:nth-of-type(3) {
--base: var(--white-two);
}
.cuboid--skiff-cabin div:nth-of-type(4) {
--base: var(--white-four);
}
.cuboid--skiff-cabin div:nth-of-type(5) {
--base: var(--white-three);
}
.cuboid--skiff-motor {
--thickness: calc(var(--base-size) * 0.12);
}
.cuboid--skiff-motor div {
background: #933;
}
.cuboid--skiff-motor div:nth-of-type(3) {
background: #bf4040;
}
.cuboid--skiff-motor div:nth-of-type(4) {
background: #c66;
}
.cuboid--skiff-motor div:nth-of-type(5) {
background: #d98c8c;
}
.cuboid--skiff-hold {
--thickness: calc(var(--base-size) * 0.12);
}
.cuboid--skiff-hold div {
background: #ccc;
}
.cuboid--skiff-hold div:nth-of-type(3) {
background: #e6e6e6;
}
.cuboid--skiff-hold div:nth-of-type(4) {
background: #b3b3b3;
}
.cuboid--skiff-hold div:nth-of-type(5) {
background: #999;
}
@-webkit-keyframes circle {
to {
transform: translate3d(-50%, -100%, calc(var(--boat-depth) * 1.5vmin)) rotateY(360deg);
}
}
@keyframes circle {
to {
transform: translate3d(-50%, -100%, calc(var(--boat-depth) * 1.5vmin)) rotateY(360deg);
}
}
</style>
</head>
<body >
<div class="scene">
<div class="canal"></div>
<div class="boat">
<label>EVERBEAR</label>
<div class="boat__body">
<div class="cuboid cuboid--body">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="boat__container boat__container--back">
<div class="cuboid cuboid--container">
<div class="cuboid__side" style="--cols: 4; --rows: 20;">
<div class="container" style="--hue: 270.86198570121127;"></div>
<div class="container" style="--hue: 239.5440617675166;"></div>
<div class="container" style="--hue: 256.2194050238272;"></div>
<div class="container" style="--hue: 277.01746756951593;"></div>
<div class="container" style="--hue: 23.16331610880364;"></div>
<div class="container" style="--hue: 316.9658322050475;"></div>
<div class="container" style="--hue: 160.32775692850288;"></div>
<div class="container" style="--hue: 353.09270702300654;"></div>
<div class="container" style="--hue: 339.1642772047112;"></div>
<div class="container" style="--hue: 303.832947685376;"></div>
<div class="container" style="--hue: 198.49250682189634;"></div>
<div class="container" style="--hue: 115.59492707103766;"></div>
<div class="container" style="--hue: 142.93778211258225;"></div>
<div class="container" style="--hue: 282.6529883350019;"></div>
<div class="container" style="--hue: 77.88330756073495;"></div>
<div class="container" style="--hue: 336.00985342363526;"></div>
<div class="container" style="--hue: 0.6706316990894301;"></div>
<div class="container" style="--hue: 335.82076554021495;"></div>
<div class="container" style="--hue: 171.24658262392634;"></div>
<div class="container" style="--hue: 21.85792618653565;"></div>
<div class="container" style="--hue: 114.1823310305986;"></div>
<div class="container" style="--hue: 350.00264095675595;"></div>
<div class="container" style="--hue: 88.6997332598539;"></div>
<div class="container" style="--hue: 297.7006564746942;"></div>
<div class="container" style="--hue: 313.97845184718705;"></div>
<div class="container" style="--hue: 191.5884097493828;"></div>
<div class="container" style="--hue: 236.51418674105324;"></div>
<div class="container" style="--hue: 102.34903661432278;"></div>
<div class="container" style="--hue: 288.78950407354176;"></div>
<div class="container" style="--hue: 64.75151554877644;"></div>
<div class="container" style="--hue: 119.46287372701015;"></div>
<div class="container" style="--hue: 133.97205508569238;"></div>
<div class="container" style="--hue: 358.58490764300683;"></div>
<div class="container" style="--hue: 121.87301009119605;"></div>
<div class="container" style="--hue: 304.2631146371177;"></div>
<div class="container" style="--hue: 146.98432017185377;"></div>
<div class="container" style="--hue: 79.40031912461124;"></div>
<div class="container" style="--hue: 219.7386131110081;"></div>
<div class="container" style="--hue: 358.05273145361355;"></div>
<div class="container" style="--hue: 141.82920556825079;"></div>
<div class="container" style="--hue: 182.74126517397156;"></div>
<div class="container" style="--hue: 50.894283240449816;"></div>
<div class="container" style="--hue: 226.00696655205235;"></div>
<div class="container" style="--hue: 55.28211478323545;"></div>
<div class="container" style="--hue: 335.72632647030946;"></div>
<div class="container" style="--hue: 75.27068078675367;"></div>
<div class="container" style="--hue: 7.8180543399756175;"></div>
<div class="container" style="--hue: 169.1877486270321;"></div>
<div class="container" style="--hue: 4.38729982466282;"></div>
<div class="container" style="--hue: 52.9394404328341;"></div>
<div class="container" style="--hue: 120.13641868746261;"></div>
<div class="container" style="--hue: 305.7110021855326;"></div>
<div class="container" style="--hue: 49.47880343213842;"></div>
<div class="container" style="--hue: 282.69900228225004;"></div>
<div class="container" style="--hue: 157.9946681491948;"></div>
<div class="container" style="--hue: 260.0208094635175;"></div>
<div class="container" style="--hue: 148.87395703040852;"></div>
<div class="container" style="--hue: 276.89538368581714;"></div>
<div class="container" style="--hue: 65.20685684798649;"></div>
<div class="container" style="--hue: 310.9562435468133;"></div>
<div class="container" style="--hue: 65.13437162298655;"></div>
<div class="container" style="--hue: 173.44341652214226;"></div>
<div class="container" style="--hue: 100.26106187520399;"></div>
<div class="container" style="--hue: 162.44956874031777;"></div>
<div class="container" style="--hue: 57.92331721533137;"></div>
<div class="container" style="--hue: 156.299151817205;"></div>
<div class="container" style="--hue: 63.37220555521186;"></div>
<div class="container" style="--hue: 331.9380718507615;"></div>
<div class="container" style="--hue: 291.0089948636051;"></div>
<div class="container" style="--hue: 114.37657865008934;"></div>
<div class="container" style="--hue: 278.12916840365057;"></div>
<div class="container" style="--hue: 235.6128015379626;"></div>
<div class="container" style="--hue: 254.9916389556267;"></div>
<div class="container" style="--hue: 321.47764042809183;"></div>
<div class="container" style="--hue: 30.102550567194317;"></div>
<div class="container" style="--hue: 240.54584121153323;"></div>
<div class="container" style="--hue: 203.61666508179815;"></div>
<div class="container" style="--hue: 276.96069704210953;"></div>
<div class="container" style="--hue: 357.18147739736924;"></div>
<div class="container" style="--hue: 291.04770049076757;"></div>
</div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side" style="--cols: 20; --rows: 8;">
<div class="container" style="--hue: 210.81084187943935;"></div>
<div class="container" style="--hue: 12.0358368768066;"></div>
<div class="container" style="--hue: 108.6265388716682;"></div>
<div class="container" style="--hue: 77.83527870058333;"></div>
<div class="container" style="--hue: 157.3038376048887;"></div>
<div class="container" style="--hue: 347.1565395803708;"></div>
<div class="container" style="--hue: 119.19899098268638;"></div>
<div class="container" style="--hue: 38.29781298211512;"></div>
<div class="container" style="--hue: 239.62305580386317;"></div>
<div class="container" style="--hue: 200.06748303518924;"></div>
<div class="container" style="--hue: 198.33964322622572;"></div>
<div class="container" style="--hue: 30.83446405306134;"></div>
<div class="container" style="--hue: 323.58206016780156;"></div>
<div class="container" style="--hue: 219.2921049945283;"></div>
<div class="container" style="--hue: 131.97653356561787;"></div>
<div class="container" style="--hue: 100.37875435403608;"></div>
<div class="container" style="--hue: 248.19744588736344;"></div>
<div class="container" style="--hue: 4.430149011760376;"></div>
<div class="container" style="--hue: 19.47488640541043;"></div>
<div class="container" style=&qu.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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