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="--hue: 98.76658705847922;"></div>
<div class="container" style="--hue: 278.54721541498054;"></div>
<div class="container" style="--hue: 13.008608011012504;"></div>
<div class="container" style="--hue: 288.99321603380616;"></div>
<div class="container" style="--hue: 254.25339192983262;"></div>
<div class="container" style="--hue: 85.32623031998125;"></div>
<div class="container" style="--hue: 73.44303427561795;"></div>
<div class="container" style="--hue: 318.9680349171304;"></div>
<div class="container" style="--hue: 24.480791159245896;"></div>
<div class="container" style="--hue: 39.54575741333517;"></div>
<div class="container" style="--hue: 244.83579991104105;"></div>
<div class="container" style="--hue: 174.5294010434672;"></div>
<div class="container" style="--hue: 223.32142209750035;"></div>
<div class="container" style="--hue: 300.0891588154102;"></div>
<div class="container" style="--hue: 251.338905125815;"></div>
<div class="container" style="--hue: 174.45534218806122;"></div>
<div class="container" style="--hue: 307.8434406086046;"></div>
<div class="container" style="--hue: 47.687681904255555;"></div>
<div class="container" style="--hue: 171.1430244206687;"></div>
<div class="container" style="--hue: 187.82294653600374;"></div>
<div class="container" style="--hue: 217.23740386093147;"></div>
<div class="container" style="--hue: 351.8369821590814;"></div>
<div class="container" style="--hue: 186.436782099755;"></div>
<div class="container" style="--hue: 281.6850093467412;"></div>
<div class="container" style="--hue: 286.5658978686853;"></div>
<div class="container" style="--hue: 350.2407064805781;"></div>
<div class="container" style="--hue: 287.4918649437644;"></div>
<div class="container" style="--hue: 201.44954942619148;"></div>
<div class="container" style="--hue: 326.96564214843744;"></div>
<div class="container" style="--hue: 56.930564893700755;"></div>
<div class="container" style="--hue: 14.147248913950365;"></div>
<div class="container" style="--hue: 19.764454668579006;"></div>
<div class="container" style="--hue: 50.50093842963278;"></div>
<div class="container" style="--hue: 189.1664887686902;"></div>
<div class="container" style="--hue: 321.4761939961503;"></div>
<div class="container" style="--hue: 144.5959576068879;"></div>
<div class="container" style="--hue: 33.45914486084477;"></div>
<div class="container" style="--hue: 87.15631343421498;"></div>
<div class="container" style="--hue: 52.34414829578852;"></div>
<div class="container" style="--hue: 72.64130842989756;"></div>
<div class="container" style="--hue: 272.5932386796875;"></div>
<div class="container" style="--hue: 48.91597431993256;"></div>
<div class="container" style="--hue: 52.54553781283278;"></div>
<div class="container" style="--hue: 137.05205734646998;"></div>
<div class="container" style="--hue: 309.83082943257904;"></div>
<div class="container" style="--hue: 82.47039682392051;"></div>
<div class="container" style="--hue: 158.9189784160821;"></div>
<div class="container" style="--hue: 115.14045679043551;"></div>
<div class="container" style="--hue: 155.53976897674855;"></div>
<div class="container" style="--hue: 21.18379450952905;"></div>
<div class="container" style="--hue: 78.28605665190396;"></div>
<div class="container" style="--hue: 248.75894448412788;"></div>
<div class="container" style="--hue: 31.36139916504975;"></div>
<div class="container" style="--hue: 193.4855969474367;"></div>
<div class="container" style="--hue: 19.28952764346379;"></div>
<div class="container" style="--hue: 221.80916261704627;"></div>
<div class="container" style="--hue: 248.88037757403563;"></div>
<div class="container" style="--hue: 84.31354903340073;"></div>
<div class="container" style="--hue: 39.18821378401127;"></div>
<div class="container" style="--hue: 182.974790108444;"></div>
<div class="container" style="--hue: 217.35737856164224;"></div>
<div class="container" style="--hue: 331.4882018575636;"></div>
<div class="container" style="--hue: 156.08178195508313;"></div>
<div class="container" style="--hue: 275.5153631401888;"></div>
<div class="container" style="--hue: 30.940449602877386;"></div>
<div class="container" style="--hue: 223.58384914068446;"></div>
<div class="container" style="--hue: 28.30102212425814;"></div>
<div class="container" style="--hue: 137.42737424826134;"></div>
<div class="container" style="--hue: 318.80150945134164;"></div>
<div class="container" style="--hue: 107.38448280563193;"></div>
<div class="container" style="--hue: 238.83483531316318;"></div>
<div class="container" style="--hue: 285.6662971520104;"></div>
<div class="container" style="--hue: 224.14671380312254;"></div>
<div class="container" style="--hue: 261.2665097782645;"></div>
<div class="container" style="--hue: 78.92977749921795;"></div>
<div class="container" style="--hue: 199.2151328601213;"></div>
<div class="container" style="--hue: 255.9356547169997;"></div>
<div class="container" style="--hue: 198.4771889662883;"></div>
<div class="container" style="--hue: 66.00290193795539;"></div>
<div class="container" style="--hue: 277.5544052420592;"></div>
<div class="container" style="--hue: 29.366497879688733;"></div>
<div class="container" style="--hue: 157.56800501104235;"></div>
<div class="container" style="--hue: 327.3809286440752;"></div>
<div class="container" style="--hue: 7.555659014366531;"></div>
<div class="container" style="--hue: 351.6283360940005;"></div>
<div class="container" style="--hue: 220.00836127244673;"></div>
<div class="container" style="--hue: 121.52909607952041;"></div>
<div class="container" style="--hue: 38.76591436275775;"></div>
<div class="container" style="--hue: 358.4500786565801;"></div>
<div class="container" style="--hue: 52.26838952604307;"></div>
<div class="container" style="--hue: 1.0703454060800333;"></div>
<div class="container" style="--hue: 263.0474404645303;"></div>
<div class="container" style="--hue: 139.02635398449274;"></div>
<div class="container" style="--hue: 87.10981855605814;"></div>
<div class="container" style="--hue: 273.39746250792575;"></div>
<div class="container" style="--hue: 331.1923060725832;"></div>
<div class="container" style="--hue: 62.9049691538149;"></div>
<div class="container" style="--hue: 303.0288103674212;"></div>
<div class="container" style="--hue: 287.7064940671522;"></div>
<div class="container" style="--hue: 52.50547507161214;"></div>
<div class="container" style="--hue: 234.15810483193678;"></div>
<div class="container" style="--hue: 59.894528152994994;"></div>
<div class="container" style="--hue: 181.84909566135056;"></div>
<div class="container" style="--hue: 243.8154613202552;"></div>
<div class="container" style="--hue: 36.18253651802619;"></div>
<div class="container" style="--hue: 59.236719997735094;"></div>
<div class="container" style="--hue: 152.19246082955172;"></div>
<div class="container" style="--hue: 172.1491628641645;"></div>
<div class="container" style="--hue: 134.73106187741064;"></div>
<div class="container" style="--hue: 185.73029844897823;"></div>
<div class="container" style="--hue: 193.5301489451514;"></div>
<div class="container" style="--hue: 178.94249931541904;"></div>
<div class="container" style="--hue: 300.2927457634529;"></div>
<div class="container" style="--hue: 198.8777799649408;"></div>
<div class="container" style="--hue: 230.12894074205715;"></div>
<div class="container" style="--hue: 345.08197652361366;"></div>
<div class="container" style="--hue: 79.02360391692234;"></div>
<div class="container" style="--hue: 109.92115317803128;"></div>
<div class="container" style="--hue: 232.37271987483848;"></div>
<div class="container" style="--hue: 123.01883995298004;"></div>
<div class="container" style="--hue: 358.6278699215209;"></div>
<div class="container" style="--hue: 280.19211250148925;"></div>
<div class="container" style="--hue: 331.4161846087528;"></div>
<div class="container" style="--hue: 26.060181538624914;"></div>
<div class="container" style="--hue: 70.62375612573067;"></div>
<div class="container" style="--hue: 149.69401182293393;"></div>
<div class="container" style="--hue: 298.72103179561327;"></div>
<div class="container" style="--hue: 195.82006391492644;"></div>
<div class="container" style="--hue: 73.40491187635945;"></div>
<div class="container" style="--hue: 343.99288967409535;"></div>
<div class="container" style="--hue: 210.57118888275411;"></div>
<div class="container" style="--hue: 263.8465771214342;"></div>
<div class="container" style="--hue: 50.67207983657502;"></div>
<div class="container" style="--hue: 179.8767847651148;"></div>
<div class="container" style="--hue: 328.34451331753826;"></div>
<div class="container" style="--hue: 20.657927268621243;"></div>
<div class="container" style="--hue: 163.0890617865979;"></div>
<div class="container" style="--hue: 97.01735510210293;"></div>
<div class="container" style="--hue: 347.5920903952094;"></div>
<div class="container" style="--hue: 329.74920345628874;"></div>
<div class="container" style="--hue: 80.48730507146875;"></div>
</div>
<div class="cuboid__side" style="--cols: 4; --rows: 8;">
<div class="container" style="--hue: 56.7202226021924;"></div>
<div class="container" style="--hue: 240.21841335295787;"></div>
<div class="container" style="--hue: 289.53121562532175;"></div>
<div class="container" style="--hue: 105.21989161136868;"></div>
<div class="container" style="--hue: 115.40248629011441;"></div>
<div class="container" style="--hue: 72.96188600631476;"></div>
<div class="container" style="--hue: 232.5248094282854;"></div>
<div class="container" style="--hue: 190.45130551788895;"></div>
<div class="container" style="--hue: 312.0345067686283;"></div>
<div class="container" style="--hue: 144.139519420011;"></div>
<div class="container" style="--hue: 25.547759999760544;"></div>
<div class="container" style="--hue: 325.14973881363505;"></div>
<div class="container" style="--hue: 156.134373749245;"></div>
<div class="container" style="--hue: 172.26339110690589;"></div>
<div class="container" style="--hue: 100.61100442995533;"></div>
<div class="container" style="--hue: 179.84851990961556;"></div>
<div class="container" style="--hue: 70.85113217096558;"></div>
<div class="container" style="--hue: 329.7932904794077;"></div>
<div class="container" style="--hue: 48.66707232582993;"></div>
<div class="container" style="--hue: 300.9572031914099;"></div>
<div class="container" style="--hue: 116.98489615522894;"></div>
<div class="container" style="--hue: 269.6563867207083;"></div>
<div class="container" style="--hue: 169.13094152388118;"></div>
<div class="container" style="--hue: 323.1846485475554;"></div>
<div class="container" style="--hue: 110.99164693192277;"></div>
<div class="container" style="--hue: 192.1468508356706;"></div>
<div class="container" style="--hue: 135.61165733567262;"></div>
<div class="container" style="--hue: 243.23062133158194;"></div>
<div class="container" style="--hue: 271.51989210335313;"></div>
<div class="container" style="--hue: 53.494718878740386;"></div>
<div class="container" style="--hue: 76.5404956984872;"></div>
<div class="container" style="--hue: 211.86904306056078;"></div>
</div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="boat__container boat__container--middle">
<div class="cuboid cuboid--container">
<div class="cuboid__side" style="--cols: 12; --rows: 20;">
<div class="container" style="--hue: 283.2500014996026;"></div>
<div class="container" style="--hue: 319.614461082588;"></div>
<div class="container" style="--hue: 101.35078169237325;"></div>
<div class="container" style="--hue: 340.126949225533;"></div>
<div class="container" style="--hue: 179.28725235645177;"></div>
<div class="container" style="--hue: 167.7757777534184;"></div>
<div class="container" style="--hue: 133.81044417323758;"></div>
<div class="container" style="--hue: 289.74508809867933;"></div>
<div class="container" style="--hue: 6.79597030828579;"></div>
<div class="container" style="--hue: 226.0265528704986;"></div>
<div class="container" style="--hue: 217.77928926537933;"></div>
<div class="container" style="--hue: 77.96821336824866;"></div>
<div class="container" style="--hue: 217.73345446707688;"></div>
<div class="container" style="--hue: 339.27477963544504;"></div>
<div class="container" style="--hue: 327.4514370727909;"></div>
<div class="container" style="--hue: 343.71044810026063;"></div>
<div class="container" style="--hue: 58.32277722812344;"></div>
<div class="container" style="--hue: 176.33776016868293;"></div>
<div class="container" style="--hue: 59.82358193583359;"></div>
<div class="container" style="--hue: 158.47062294096142;"></div>
<div class="container" style="--hue: 30.674099013783803;"></div>
<div class="container" style="--hue: 185.64460718044148;"></div>
<div class="container" style="--hue: 267.1463086739834;"></div>
<div class="container" style="--hue: 226.14685242137915;"></div>
<div class="container" style="--hue: 220.7042387249593;"></div>
<div class="container" style="--hue: 24.97133070420918;"></div>
<div class="container" style="--hue: 330.8223896090934;"></div>
<div class="container" style="--hue: 16.569826520701632;"></div>
<div class="container" style="--hue: 314.1692554745389;"></div>
<div class="container" style="--hue: 268.12453140247396;"></div>
<div class="container" style="--hue: 240.53478779748428;"></div>
<div class="container" style="--hue: 358.9253103628845;"></div>
<div class="container" style="--hue: 359.56336512293564;"></div>
<div class="container" style="--hue: 202.63048688793123;"></div>
<div class="container" style="--hue: 350.16730449753027;"></div>
<div class="container" style="--hue: 231.16726981834577;"></div>
<div class="container" style="--hue: 60.43546774226364;"></div>
<div class="container" style="--hue: 74.05938408758722;"></div>
<div class="container" style="--hue: 321.10414881578254;"></div>
<div class="container" style="--hue: 294.72250008434196;"></div>
<div class="container" style="--hue: 201.5246084143629;"></div>
<div class="container" style="--hue: 295.9778401583026;"></div>
<div class="container" style="--hue: 4.91975362819546;"></div>
<div class="container" style="--hue: 338.8198510182273;"></div>
<div class="container" style="--hue: 350.4751986337384;"></div>
<div class="container" style="--hue: 111.2292026992349;"></div>
<div class="container" style="--hue: 354.34943550554266;"></div>
<div class="container" style="--hue: 121.85532548310117;"></div>
<div class="container" style="--hue: 313.08436430949513;"></div>
<div class="container" style="--hue: 304.84916134129753;"></div>
<div class="container" style="--hue: 286.8413459165116;"></div>
<div class="container" style="--hue: 3.674157244797751;"></div>
<div class="container" style="--hue: 345.2779013656911;"></div>
<div class="container" style="--hue: 155.9472628298015;"></div>
<div class="container" style="--hue: 160.8684215186806;"></div>
<div class="container" style="--hue: 47.03642929972112;"></div>
<div class="container" style="--hue: 167.78269423365526;"></div>
<div class="container" style="--hue: 44.950917216322246;"></div>
<div class="container" style="--hue: 301.78858606517787;"></div>
<div class="container" style="--hue: 67.75040990211077;"></div>
<div class="container" style="--hue: 288.4604717852897;"></div>
<div class="container" style="--hue: 337.7457354626447;"></div>
<div class="container" style="--hue: 59.00049084319892;"></div>
<div class="container" style="--hue: 186.208793134657;"></div>
<div class="container" style="--hue: 84.12173883591942;"></div>
<div class="container" style="--hue: 290.3285455757406;"></div>
<div class="container" style="--hue: 166.61446874601592;"></div>
<div class="container" style="--hue: 37.28530747688537;"></div>
<div class="container" style="--hue: 141.47893092618557;"></div>
<div class="container" style="--hue: 96.21578242730826;"></div>
<div class="container" style="--hue: 99.25947475360793;"></div>
<div class="container" style="--hue: 152.32112355820428;"></div>
<div class="container" style="--hue: 20.173264919169505;"></div>
<div class="container" style="--hue: 71.03327670813789;"></div>
<div class="container" style="--hue: 87.65137238492366;"></div>
<div class="container" style="--hue: 208.80665000571906;"></div>
<div class="container" style="--hue: 288.00836857593623;"></div>
<div class="container" style="--hue: 338.13551870761296;"></div>
<div class="container" style="--hue: 6.42319190449137;"></div>
<div class="container" style="--hue: 56.65554408028076;"></div>
<div class="container" style="--hue: 215.00105541351184;"></div>
<div class="container" style="--hue: 90.71020337806864;"></div>
<div class="container" style="--hue: 351.2923106375553;"></div>
<div class="container" style="--hue: 236.23846091819217;"></div>
<div class="container" style="--hue: 233.19786003103118;"></div>
<div class="container" style="--hue: 261.0196094466072;"></div>
<div class="container" style="--hue: 86.13367634504614;"></div>
<div class="container" style="--hue: 224.82044672728887;"></div>
<div class="container" style="--hue: 163.20206901252396;"></div>
<div class="container" style="--hue: 215.39809724128895;"></div>
<div class="container" style="--hue: 209.13717877904597;"></div>
<div class="container" style="--hue: 232.7750010913874;"></div>
<div class="container" style="--hue: 2.7700219864592945;"></div>
<div class="container" style="--hue: 279.0919754336272;"></div>
<div class="container" style="--hue: 18.66919579148167;"></div>
<div class="container" style="--hue: 212.23227166903538;"></div>
<div class="container" style="--hue: 90.70625164762153;"></div>
<div class="container" style="--hue: 125.53826348193488;"></div>
<div class="container" style="--hue: 72.31068849836115;"></div>
<div class="container" style="--hue: 321.0452509202081;"></div>
<div class="container" style="--hue: 166.4039310267113;"></div>
<div class="container" style="--hue: 50.569111134210345;"></div>
<div class="container" style="--hue: 338.6846199850303;"></div>
<div class="container" style="--hue: 61.622613676632895;"></div>
<div class="container" style="--hue: 42.14727876538759;"></div>
<div class="container" style="--hue: 353.33163366990345;"></div>
<div class="container" style="--hue: 227.7911462182396;"></div>
<div class="container" style="--hue: 227.87301262874703;"></div>
<div class="container" style="--hue: 320.8366544240987;"></div>
<div class="container" style="--hue: 135.93247105654157;"></div>
<div class="container" style="--hue: 357.05130704982207;"></div>
<div class="container" style="--hue: 344.03971540117436;"></div>
<div class="container" style="--hue: 148.39655591196453;"></div>
<div class="container" style="--hue: 312.89334000349777;"></div>
<div class="container" style="--hue: 299.02353526682776;"></div>
<div class="container" style="--hue: 219.19924318580632;"></div>
<div class="container" style="--hue: 236.85681880654582;"></div>
<div class="container" style="--hue: 51.196507645767724;"></div>
<div class="container" style="--hue: 326.78778901047;"></div>
<div class="container" style="--hue: 339.73692973291907;"></div>
<div class="container" style="--hue: 353.15156447848585;"></div>
<div class="container" style="--hue: 357.76024631806723;"></div>
<div class="container" style="--hue: 271.14565823968036;"></div>
<div class="container" style="--hue: 219.7880445900195;"></div>
<div class="container" style="--hue: 45.77979260659251;"></div>
<div class="container" style="--hue: 280.09692838742643;"></div>
<div class="container" style="--hue: 87.70801383826071;"></div>
<div class="container" style="--hue: 304.0895947017473;"></div>
<div class="container" style="--hue: 208.76939301900126;"></div>
<div class="container" style="--hue: 313.44503000488305;"></div>
<div class="container" style="--hue: 290.0338490705261;"></div>
<div class="container" style="--hue: 242.26796451020428;"></div>
<div class="container" style="--hue: 356.6956740400079;"></div>
<div class="container" style="--hue: 336.80154177196965;"></div>
<div class="container" style="--hue: 223.796548639998;"></div>
<div class="container" style="--hue: 151.61716921472677;"></div>
<div class="container" style="--hue: 315.9442697338552;"></div>
<div class="container" style="--hue: 315.1391495487137;"></div>
<div class="container" style="--hue: 340.389402075214;"></div>
<div class="container" style="--hue: 124.18787772212256;"></div>
<div class="container" style="--hue: 291.17964058617497;"></div>
<div class="container" style="--hue: 331.76348392002825;"></div>
<div class="container" style="--hue: 197.44889223834105;"></div>
<div class="container" style="--hue: 199.29585091927274;"></div>
<div class="container" style="--hue: 198.89921161625347;"></div>
<div class="container" style="--hue: 204.0112882988208;"></div>
<div class="container" style="--hue: 143.7348380125893;"></div>
<div class="container" style="--hue: 327.91876819676;"></div>
<div class="container" style="--hue: 14.524162704681753;"></div>
<div class="container" style="--hue: 52.198696016867814;"></div>
<div class="container" style="--hue: 358.36337265556176;"></div>
<div class="container" style="--hue: 208.93263716629767;"></div>
<div class="container" style="--hue: 238.72272908221234;"></div>
<div class="container" style="--hue: 238.53981607601162;"></div>
<div class="container" style="--hue: 338.48996861933466;"></div>
<div class="container" style="--hue: 60.75140959389823;"></div>
<div class="container" style="--hue: 185.2449135887503;"></div>
<div class="container" style="--hue: 63.98396830351799;"></div>
<div class="container" style="--hue: 352.3198412115739;"></div>
<div class="container" style="--hue: 160.2552358458446;"></div>
<div class="container" style="--hue: 326.53999562483204;"></div>
<div class="container" style="--hue: 105.23017607175815;"></div>
<div class="container" style="--hue: 275.5624886178142;"></div>
<div class="container" style="--hue: 10.193791373133534;"></div>
<div class="container" style="--hue: 285.6993368076464;"></div>
<div class="container" style="--hue: 14.203123870366365;"></div>
<div class="container" style="--hue: 178.78295270071416;"></div>
<div class="container" style="--hue: 170.25268281789968;"></div>
<div class="container" style="--hue: 225.75658255347673;"></div>
<div class="container" style="--hue: 70.92966219701435;"></div>
<div class="container" style="--hue: 49.26324285517072;"></div>
<div class="container" style="--hue: 170.09645863427826;"></div>
<div class="container" style="--hue: 99.94816788236068;"></div>
<div class="container" style="--hue: 180.20353670897467;"></div>
<div class="container" style="--hue: 267.35823755074085;"></div>
<div class="container" style="--hue: 118.04807119389676;"></div>
<div class="container" style="--hue: 42.841570682791826;"></div>
<div class="container" style="--hue: 0.8823524108232661;"></div>
<div class="container" style="--hue: 329.7700004107281;"></div>
<div class="container" style="--hue: 88.87419457865333;"></div>
<div class="container" style="--hue: 294.2073018977292;"></div>
<div class="container" style="--hue: 96.77979472238682;"></div>
<div class="container" style="--hue: 191.85549754407575;"></div>
<div class="container" style="--hue: 211.298261637282;"></div>
<div class="container" style="--hue: 197.86954476376005;"></div>
<div class="container" style="--hue: 8.049593451161865;"></div>
<div class="container" style="--hue: 283.35925705864435;"></div>
<div class="container" style="--hue: 18.975566914120535;"></div>
<div class="container" style="--hue: 48.97284085694907;"></div>
<div class="container" style="--hue: 207.2301179999585;"></div>
<div class="container" style="--hue: 14.87882412871162;"></div>
<div class="container" style="--hue: 197.18450914125208;"></div>
<div class="container" style="--hue: 341.30244770774334;"></div>
<div class="container" style="--hue: 325.1532383138132;"></div>
<div class="container" style="--hue: 98.41742910341495;"></div>
<div class="container" style="--hue: 276.46735953670697;"></div>
<div class="container" style="--hue: 120.72819461360702;"></div>
<div class="container" style="--hue: 201.32373842778497;"></div>
<div class="container" style="--hue: 272.843059909355;"></div>
<div class="container" style="--hue: 320.22874898229173;"></div>
<div class="container" style="--hue: 30.372871561470127;"></div>
<div class="container" style="--hue: 139.26890012613322;"></div>
<div class="container" style="--hue: 91.10048728269652;"></div>
<div class="container" style="--hue: 146.69380024301435;"></div>
<div class="container" style="--hue: 91.24241673036755;"></div>
<div class="container" style="--hue: 42.45384176429109;"></div>
<div class="container" style="--hue: 31.671836582707797;"></div>
<div class="container" style="--hue: 175.6086639873196;"></div>
<div class="container" style="--hue: 266.77473348336116;"></div>
<div class="container" style="--hue: 197.93557990801904;"></div>
<div class="container" style="--hue: 255.80396967280808;"></div>
<div class="container" style="--hue: 275.8811182768225;"></div>
<div class="container" style="--hue: 161.11476000776153;"></div>
<div class="container" style="--hue: 222.43255341563673;"></div>
<div class="container" style="--hue: 253.7193065772258;"></div>
<div class="container" style="--hue: 122.53478721646148;"></div>
<div class="container" style="--hue: 193.6369693812254;"></div>
<div class="container" style="--hue: 96.99728693299788;"></div>
<div class="container" style="--hue: 150.86252611953137;"></div>
<div class="container" style="--hue: 208.2490138884762;"></div>
<div class="container" style="--hue: 235.117521796291;"></div>
<div class="container" style="--hue: 88.11769235867285;"></div>
<div class="container" style="--hue: 177.7801568722261;"></div>
<div class="container" style="--hue: 18.159855260095323;"></div>
<div class="container" style="--hue: 328.45604635198873;"></div>
<div class="container" style="--hue: 327.1268915598309;"></div>
<div class="container" style="--hue: 352.499813303106;"></div>
<div class="container" style="--hue: 300.9490342053815;"></div>
<div class="container" style="--hue: 347.2291597048738;"></div>
<div class="container" style="--hue: 332.9505785835611;"></div>
<div class="container" style="--hue: 27.965356560501835;"></div>
<div class="container" style="--hue: 174.49136549314682;"></div>
<div class="container" style="--hue: 273.28386833333894;"></div>
<div class="container" style="--hue: 11.356417703418948;"></div>
<div class="container" style="--hue: 327.78512378903815;"></div>
<div class="container" style="--hue: 298.001313384689;"></div>
<div class="container" style="--hue: 343.37939391518495;"></div>
<div class="container" style="--hue: 350.88898093122384;"></div>
<div class="container" style="--hue: 146.10676640215127;"></div>
<div class="container" style="--hue: 123.0671219713208;"></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: 243.75158561058217;"></div>
<div class="container" style="--hue: 4.363974485109692;"></div>
<div class="container" style="--hue: 128.7321264284992;"></div>
<div class="container" style="--hue: 314.5113027274532;"></div>
<div class="container" style="--hue: 104.41135046335378;"></div>
<div class="container" style="--hue: 76.86655872974237;"></div>
<div class="container" style="--hue: 219.27895134729846;"></div>
<div class="container" style="--hue: 13.188256125474496;"></div>
<div class="container" style="--hue: 205.02977425869;"></div>
<div class="container" style="--hue: 112.66731765628205;"></div>
<div class="container" style="--hue: 288.0462906746024;"></div>
<div class="container" style="--hue: 189.81006584667716;"></div>
<div class="container" style="--hue: 134.64715365634638;"></div>
<div class="container" style="--hue: 294.30995599419884;"></div>
<div class="container" style="--hue: 208.03166400480947;"></div>
<div class="container" style="--hue: 194.40371061400782;"></div>
<div class="container" style="--hue: 204.7753514867713;"></div>
<div class="container" style="--hue: 75.51367578409338;"></div>
<div class="container" style="--hue: 302.5931932602916;"></div>
<div class="container" style="--hue: 272.10092669232483;"></div>
<div class="container" style="--hue: 258.3494982312626;"></div>
<div class="container" style="--hue: 71.94187858956262;"></div>
<div class="container" style="--hue: 297.5481465332951;"></div>
<div class=&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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