<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body {
background:#fff456;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 800px; height: 600px;
overflow: hidden;
}
.scene-1 {
position: absolute;
top: 0px; left: 0px;
width: 800px; height: 600px;
animation: sceneOne 10s linear infinite;
}
.scene-1 .bg-1 {
position: absolute;
top: 0px; left: 0px;
width: 900px; height: 122px;
background: #654143;
border-radius: 0 61px 61px 0;
}
.scene-1 .bg-1:before {
content: '';
position: absolute;
top: 122px; left: 0px;
width: 822px; height: 250px;
background: #704744;
}
.scene-1 .bg-1:after {
content: '';
position: absolute;
top: 340px; left: 0px;
width: 543px; height: 228px;
background: #654143;
border-radius: 0 56px 35px 0;
}
.scene-1 .bg-2 {
position: absolute;
top: 0px; right: 0px;
width: 900px; height: 77px;
background: #593640;
border-radius: 30px 0 0 30px;
}
.scene-1 .bg-2:before {
content: '';
position: absolute;
top: 360px; right: 0px;
width: 870px; height: 222px;
background: #654143;
border-radius: 68px 0 0 0;
}
.scene-1 .bg-2:after {
content: '';
position: absolute;
top: 582px; right: 0px;
width: 1244px; height: 20px;
background: #3F252E;
}
.scene-1 .table {
position: absolute;
top: 326px; left: 397px;
width: 208px; height: 14px;
background: #377CA6;
}
.scene-1 .table:before {
content: '';
position: absolute;
top: 14px; left: 49px;
width: 133px; height: 24px;
box-sizing: border-box;
border-top: 13px solid #1C101C;
border-right: 13px solid #1C101C;
border-left: 13px solid #1C101C;
}
.scene-1 .table:after {
content: '';
position: absolute;
top: 38px; left: 49px;
width: 133px; height: 186px;
box-sizing: border-box;
border-left: 13px solid #271F28;
border-bottom: 13px solid #271F28;
border-right: 13px solid #271F28;
border-radius: 0 0 53px 0;
}
.scene-1 .table > div:nth-child(1) {
position: absolute;
top: 14px; left: 21px;
width: 28px; height: 13px;
background: #1C101C;
}
.scene-1 .table > div:nth-child(1):before {
content: '';
position: absolute;
top: 196px; left: 17px;
width: 13px; height: 14px;
background: #271F28;
box-shadow: 0 14px 0 #1C101C, 0 27px 0 #271F28, 0 31px 0 #271F28;
}
.scene-1 .table > div:nth-child(1):after {
content: '';
position: absolute;
top: 204px; left: 99px;
width: 13px; height: 18px;
background: #1C101C;
box-shadow: 0 18px 0 #271F28;
}
.scene-1 .table > div:nth-child(2) {
position: absolute;
top: -96px; left: 89px;
width: 86px; height: 96px;
background: #271F28;
border-radius: 27px 27px 40px 0;
box-shadow: inset -8px -59px 0 9px #1C101C;
}
.scene-1 .table > div:nth-child(2):before {
content: '';
position: absolute;
top: 28px; left: -50px;
width: 67px; height: 10px;
background: #D37241;
box-shadow: 28px 0 0 0 #AA375F,
27px 0 0 0 #740748,
-9px 10px 0 0 #1C101C,
28px 10px 0 0 white,
-23px 28px 0 0 #377CA6,
28px 28px 0 0 #D37241,
-28px 38px 0 0 white,
27px 38px 0 0 white;
}
.scene-1 .table > div:nth-child(2):after {
content: '';
position: absolute;
top: 62px; left: 67px;
width: 27px; height: 27px;
background-image: linear-gradient(to right, #377CA6 36%, #1C101C 37%, #1C101C 63%, #377CA6 64%);
box-shadow: 0 0 0 6px #1C101C,
0 -5px 0 12px #234259;
}
.scene-1 .table > div:nth-child(3) {
position: absolute;
top: -71px; left: 40px;
width: 97px; height: 5px;
background: #404040;
box-shadow: -3px 25px 0px 3px #404040,
-14px 25px 0px 3px #404040,
-8px 58px 0px 8px #404040,
-32px 58px 0px 8px #404040;
}
.scene-1 .table > div:nth-child(3):before {
content: '';
position: absolute;
top: 0px;
left: -8px; width: 5px;
height: 50px;
background: #404040;
box-shadow: 14px 0 0 0 #404040,
28px 0 0 0 #404040,
42px 0 0 0 #404040,
56px 0 0 0 #404040,
71px 0 0 0 #404040,
85px 0 0 0 #404040,
100px 0 0 0 #404040;
}
.scene-1 .table > div:nth-child(3):after {
content: '';
position: absolute;
top: 47px; left: 92px;
width: 76px; height: 6px;
background: white;
box-shadow: 0 6px 0 0 #A7AEAF,
-7px 12px 0 0 white,
0 18px 0 0 #A7AEAF,
-76px 18px 0 0 #1C101C;
}
.scene-1 .tablet {
position: absolute;
top: 0; left: 0;
width: 17px; height: 185px;
background: #BEAE9D;
transform-origin: top left;
transform: rotate(-143deg);
box-shadow: inset 0 -13px 0 0 #9C857C, inset 0 45px 0 0 #9C857C;
}
.scene-1 .tablet:after {
content: '';
position: absolute;
top: 79px; left: -14px;
width: 14px; height: 38px;
background: #234259;
}
.scene-1 .tablet:before {
content: '';
position: absolute;
top: 62px; left: -83px;
width: 80px; height: 10px;
background: #1C101C;
transform: rotate(23deg);
transform-origin: 0 0;
}
.scene-1 .lamp {
position: absolute;
top: -304px; left: 46px;
width: 21px; height: 21px;
border-radius: 20px 20px 0 0;
background: #1C101C;
}
.scene-1 .lamp:before {
content: '';
position: absolute;
top: 13px; left: -9px;
width: 43px; height: 10px;
background: #271F28;
}
.scene-1 .lamp:after {
content: '';
position: absolute;
top: 10px; left: 52px;
width: 80px; height: 5px;
background: #271F28;
box-shadow: 0 10px 0 0 #271F28;
}
.scene-1 .lamp > div:nth-child(1) {
position: absolute;
top: 8px; left: 33px;
width: 19px; height: 20px;
background: #1C101C;
border-radius: 20px 0 0 20px;
}
.scene-1 .lamp > div:nth-child(1):after {
content: '';
position: absolute;
top: -2px; left: 99px;
width: 22px; height: 32px;
background: #1C101C;
border-radius: 2px 100% 14px 14px;
}
.scene-1 .lamp > div:nth-child(1):before {
content: '';
position: absolute;
top: 16px; left: 103px;
width: 6px; height: 102px;
background: #271F28;
transform: rotate(35deg);
transform-origin: 0 0;
box-shadow: 10px 0 0 0 #271F28;
}
.scene-1 .lamp > div:nth-child(2) {
position: absolute;
top: 19px; left: -25px;
width: 70px; height: 33px;
background: #1C101C;
border-radius: 100px 100px 0 0;
}
.scene-1 .lamp > div:nth-child(2):before {
content: '';
position: absolute;
top: 33px; left: 0px;
width: 70px; height: 4px;
background: #D37241;
}
.scene-1 .lamp > div:nth-child(2):after {
content: '';
position: absolute;
top: 37px; left: -133px;
width: 330px; height: 0px;
border-left: 132px solid transparent;
border-right: 127px solid transparent;
border-bottom: 194px solid #D37241;
box-sizing: border-box;
opacity: .2;
}
.scene-1 .chair {
position: absolute;
top: 433px; left: 214px;
height: 39px; width: 109px;
background: #1C101C;
border-radius: 28px 28px 2px 2px;
box-shadow: 0 123px 0 -15px #271F28;
}
.scene-1 .chair:before {
content: '';
position: absolute;
top: 39px; left: 36px;
width: 13px; height: 99px;
background: #271F28;
box-shadow: 12px 0 0 0 #404040;
}
.scene-1 .chair:after {
content: '';
position: absolute;
top: 71px; left: 56px;
width: 32px; height: 12px;
border-radius: 6px;
box-shadow: -21px -48px 0 13px #1C101C;
background: #1C101C;
}
.scene-1 .armchair {
position: absolute;
top: 244px; left: 604px;
width: 114px; height: 165px;
background: #1C101C;
border-radius: 20px 62px 0 0;
}
.scene-1 .armchair:before {
content: '';
position: absolute;
top: 167px; left: 0px;
width: 210px; height: 171px;
background: #3F252E;
}
.scene-1 .armchair:after {
content: '';
position: absolute;
top: 128px; left: 114px;
width: 100px; height: 34px;
background: #1C101C;
box-shadow: inset 0 12px 0 0 #3F252E;
}
.scene-1 .armchair > div:nth-child(1) {
position: absolute;
top: 162px; left: 0px;
width: 200px; height: 66px;
background: #593640;
border-radius: 0 0 0 66px;
box-shadow: 0 21px 0 0 #1C101C;
}
.scene-1 .armchair > div:nth-child(1):before {
content: '';
position: absolute;
top: 0px; left: 72px;
width: 140px; height: 20px;
background: #654036;
border-radius: 0 0 0 20px;
}
.scene-1 .armchair > div:nth-child(1):after {
content: '';
position: absolute;
top: -80px; left: 0px;
width: 71px; height: 80px;
background: #593640;
border-radius: 0 100px 0 0;
}
.scene-1 .armchair .plaid {
position: absolute;
top: 152px; left: 114px;
width: 90px; height: 10px;
background: #AF7C50;
box-shadow: 0 10px 0 0 #956B48,
0 20px 0 0 #AF7C50,
0 30px 0 0 #956B48,
0 40px 0 0 #AF7C50;
z-index: 1;
}
.scene-1 .armchair .plaid:before {
content: '';
position: absolute;
top: 50px; left: 0px;
width: 10px; height: 14px;
background: #956B48;
box-shadow: 18px 0 0 0 #956B48,
36px 0 0 0 #956B48,
54px 0 0 0 #956B48,
72px 0 0 0 #956B48;
}
.scene-1 .armchair .plaid:after {
content: '';
position: absolute;
top: -44px; left: 0px;
width: 41px; height: 44px;
background: linear-gradient(to right, #AF7C50 50%, #D69C51 51%);
border-radius: 24px 24px 0 0;
}
.scene-1 .picture {
position: absolute;
top: -34px; right: -22px;
height: 150px; width: 120px;
background: #9C857C;
overflow: hidden;
box-shadow: 0 0 0 22px #956B48,
0 0 0 43px #3F252E;
}
.scene-1 .picture:before {
content: '';
position: absolute;
top: 47px; left: 27px;
width: 50px; height: 50px;
border-radius: 100%;
background: #BEAE9D;
}
.scene-1 .picture:after {
content: '';
position: absolute;
top: 109px; left: 56px;
width: 14px;
border-left: 29px solid transparent;
border-bottom: 35px solid #3F252E;
}
.scene-1 .picture > div:nth-child(1) {
position: absolute;
top: 75px; left: 9px;
width: 15px;
border-right: 50px solid transparent;
border-left: 39px solid transparent;
border-bottom: 40px solid #88594E;
}
.scene-1 .picture > div:nth-child(1):before {
content: '';
position: absolute;
top: -46px; left: -23px;
height: 10px;
border-left: 74px solid transparent;
border-bottom: 76px solid #88594E;
}
.scene-1 .picture > div:nth-child(1):after {
content: '';
position: absolute;
top: 17px; left: -48px;
width: 14px;
border-right: 78px solid transparent;
border-bottom: 100px solid #654036;
}
.scene-1 .picture > div:nth-child(2) {
position: absolute;
top: 100px; left: 19px;
width: 24px;
border-right: 35px solid transparent;
border-bottom: 40px solid #654036;
}
.scene-1 .picture > div:nth-child(2):before {
content: '';
position: absolute;
top: 9px; left: 32px;
width: 50px; height: 40px;
background: #654036;
}
.scene-1 .picture > div:nth-child(2):after {
content: '';
position: absolute;
top: 24px; left: -4px;
width: 13px;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid #3F252E;
box-shadow: 8px 44px 0 24px #3F252E;
}
.scene-1 .red-dog {
position: absolute;
top: 152px; left: 568px;
width: 70px; height: 43px;
background: #D37241;
border-radius: 0 34px 0 0;
}
.scene-1 .red-dog:before {
content: '';
position: absolute;
top: -20px; left: -78px;
width: 104px; height: 68px;
background: white;
border-radius: 0 100px 0 100px;
}
.scene-1 .red-dog__body {
position: absolute;
top: -44px; left: -65px;
width: 81px; height: 74px;
background: #D37241;
border-radius: 0 100px 0 100px;
box-shadow: 35px 24px 0 -24px #D37241, -7px -15px 0 -5px #D37241;
}
.scene-1 .red-dog__body:before {
content: '';
position: absolute;
top: 30px; left: 15px;
width: 35px; height: 40px;
background: #D37241;
border-radius: 0 0 20px 20px;
transform-origin: 0 0;
transform: rotate(40deg);
}
.scene-1 .red-dog__body:after {
content: '';
position: absolute;
top: 50px; left: 111px;
width: 16px; height: 16px;
background: #D37241;
transform: skewX(-22deg) rotate(-34deg);
animation: sceneOneDogTail .8s ease infinite;
transform-origin: bottom left;
}
.scene-1 .red-dog__leg {
position: absolute;
top: 28px; left: 21px;
width: 49px; height: 43px;
background: #D37241;
border-radius: 0 9px 0 35px;
}
.scene-1 .red-dog__leg:before {
content: '';
position: absolute;
top: 30px; left: 49px;
width: 12px; height: 34px;
background: linear-gradient(#D37241 38%, white 39%);
border-radius: 0 5px 2px 0 / 0 15px 2px 0;
}
.scene-1 .red-dog__leg:after {
content: '';
position: absolute;
top: 52px; left: 34px;
width: 16px; height: 12px;
background: white;
border-radius: 14px 0 0 0;
}
.scene-1 .red-dog__hand {
position: absolute;
top: 15px; left: -96px;
width: 43px; height: 22px;
background: white;
transform-origin: bottom right;
transform: rotate(40deg);
border-radius: 21px 10px 10px 0;
}
.scene-1 .red-dog__hand:before {
content: '';
position: absolute;
top: 21px; left: 0px;
width: 15px; height: 20px;
background: white;
border-radius: 0 0 0 17px;
}
.scene-1 .red-dog__head {
position: absolute;
top: -68px; left: -99px;
width: 42px; height: 56px;
background: #D37241;
border-radius: 36% 0 90% 4px / 70% 0 46% 4px;
border-right: 8px solid white;
transform-origin: bottom right;
animation: sceneOneDogHead 10s ease infinite;
transform: rotate(0deg);
}
.scene-1 .red-dog__head:before {
content: '';
position: absolute;
top: 25px; left: -20px;
width: 22px; height: 21px;
background: #D37241;
border-radius: 27% 0 0 100%;
box-shadow: inset 21px 2px 0 -6px white;
}
.scene-1 .red-dog__head:after {
content: '';
position: absolute;
top: 20px; left: 9px;
width: 6px; height: 6px;
background: black;
border-radius: 100%;
animation: sceneOneDogEye 2s ease infinite;
}
.scene-1 .red-dog__head > div:nth-child(1) {
position: absolute;
top: -22px; left: 18px;
width: 11px;
border-left: 23px solid transparent;
border-bottom: 39px solid #D37241;
transform-origin: right bottom;
transform: rotate(10deg);
}
.scene-1 .red-dog__head > div:nth-child(1):before {
content: '';
position: absolute;
top: 0px; left: -18px;
width: 6px;
border-left: 23px solid transparent;
border-bottom: 39px solid white;
}
.scene-1 .red-dog__head > div:nth-child(1):after {
content: '';
position: absolute;
top: 37px; left: -18px;
width: 30px; height: 9px;
background: white;
transform: rotate(-9deg);
border-radius: 0 0 10px 6px;
}
.scene-1 .red-dog__head > div:nth-child(2) {
position: absolute;
top: 25px; left: -20px;
width: 10px; height: 9px;
background: black;
border-radius: 6px 0 15px 3px;
}
.scene-1 .back-table {
position: absolute;
top: 350px; left: 0px;
width: 277px; height: 30px;
background: linear-gradient(to right, #956B48 20%, #7A5548 21%, #7A5548 79%, #956B48 80%);
box-shadow: 0 25px 0 0 #1C101C, 0 -10px 0 0 #AF7C50;
}
.scene-1 .back-table:before {
content: '';
position: absolute;
top: 55px; left: 0px;
width: 26px; height: 175px;
background: #1C101C;
box-shadow: 251px 0 0 0 #1C101C;
}
.scene-1 .back-table:after {
content: '';
position: absolute;
top: 10px; left: 124px;
width: 30px; height: 10px;
background: #1C101C;
}
.scene-1 .back-table .books {
position: absolute;
top: -26px; left: 46px;
width: 102px; height: 16px;
box-sizing: border-box;
background: white;
box-shadow: inset -8px 0 0 0 #716C6B;
border-radius: 8px 0 0 8px;
border: 4px solid #271F28;
border-right: 0;
}
.scene-1 .back-table .books:before {
content: '';
position: absolute;
top: -28px; left: 10px;
width: 88px; height: 24px;
box-sizing: border-box;
background: white;
border-radius: 0 12px 12px 0;
border: 6px solid #593640;
border-left: 0;
box-shadow: inset 6px 0 0 0 #716C6B,
inset -23px 0 0 -13px #271F28,
inset 0 6px 0 0 rgba(0, 0, 0, .1);
}
.scene-1 .back-table .frame {
position: absolute;
top: -92px; left: 148px;
width: 46px; height: 62px;
background: #D69C51;
border: 10px solid #485973;
}
.scene-1 .back-table .frame:before {
content: '';
position: absolute;
top: 10px; left: 10px;
width: 20px; height: 20px;
border: 3px solid #553333;
transform: rotate(45deg);
z-index: 1;
}
.scene-1 .back-table .frame:after {
content: '';
position: absolute;
top: 26px; left: 10px;
width: 20px; height: 20px;
border: 3px solid #553333;
transform: rotate(45deg);
z-index: 1;
}
.scene-1 .photos {
position: absolute;
top: 252px; left: 66px;
width: 21px; height: 22px;
background: #3F252E;
border: 4px solid white;
border-bottom-width: 10px;
transform: rotate(22deg);
}
.scene-1 .photos:before {
content: '';
position: absolute;
top: -10px; left: 13px;
width: 21px; height: 22px;
background: #234259;
border: 4px solid white;
border-bottom-width: 10px;
transform: rotate(-44deg);
}
.scene-1 .photos:after {
content: '';
position: absolute;
top: -5px; left: 8px;
width: 8px; height: 8px;
background: black;
border-radius: 50%;
}
.scene-1 .shelf-1 {
position: absolute;
top: 224px; left: 0px;
width: 210px; height: 8px;
background: #AF7C50;
}
.scene-1 .shelf-1:before {
content: '';
position: absolute;
top: 8px; left: 40px;
width: 111px; height: 6px;
background: #1C101C;
}
.scene-1 .shelf-1:after {
content: '';
position: absolute;
top: 14px; left: 40px;
width: 8px; height: 6px;
background: #1C101C;
border-radius: 0 0 5px 5px;
box-shadow: 103px 0 0 0 #1C101C;
}
.scene-1 .shelf-1 .book {
position: absolute;
top: -28px; left: 77px;
width: 71px; height: 16px;
background: white;
border: 6px solid #234259;
border-right: 0;
border-radius: 15px 0 0 15px;
box-shadow: inset 24px 0 0 -15px #1C101C,
inset 0 6px 0 0 rgba(0, 0, 0, .1);
}
.scene-1 .shelf-1 .book:before {
content: '';
position: absolute;
top: -43px; left: 35px;
width: 36px; height: 37px;
background: linear-gradient(#D5C8B8 12%, #BEAE9D 13%, #BEAE9D 90%, #3F252E 91%);
border-radius: 0 0 12px 12px;
}
.scene-1 .shelf-1 .book:after {
content: '';
position: absolute;
top: -38px; left: 71px;
width: 14px; height: 22px;
box-sizing: border-box;
border-radius: 0 12px 12px 0;
border: 7px solid #3F252E;
border-left: 0;
}
.scene-1 .shelf-1 .camera {
position: absolute;
top: -38px; left: 0px;
width: 60px; height: 38px;
background: linear-gradient(#404040 68%, #271F28 69%);
border-radius: 0 8px 0 8px;
}
.scene-1 .shelf-1 .camera:before {
content: '';
position: absolute;
top: -4px; left: 0px;
width: 16px; height: 4px;
background: #1C101C;
box-shadow: 5px 26px 0 0 #716C6B;
}
.scene-1 .shelf-1 .camera:after {
content: '';
position: absolute;
top: 3px; left: 24px;
width: 30px; height: 30px;
box-sizing: border-box;
background: linear-gradient(#716C6B 45%, #94959B 46%);
border-radius: 50%;
border: 7px solid #1C101C;
transform: rotate(-45deg);
}
.scene-1 .shelf-1 .camera__flash {
position: absolute;
top: -34px; left: 22px;
width: 34px; height: 24px;
box-sizing: border-box;
background: white;
border: 4px solid #271F28;
border-top-width: 7px;
box-shadow: inset 0 6px 0 0 rgba(0, 0, 0, .1);
}
.scene-1 .shelf-1 .camera__flash:before {
content: '';
position: absolute;
top: 17px; left: 1px;
width: 22px; height: 10px;
background: #1C101C;
}
.scene-1 .shelf-2 {
position: absolute;
top: 118px; left: 0px;
width: 198px; height: 18px;
background: #3F252E;
box-shadow: -18px 16px 0 0 #593640;
}
.scene-1 .shelf-2:before {
content: '';
position: absolute;
top: 18px; left: 180px;
border-right: 17px solid transparent;
border-top: 16px solid #271F28;
}
.scene-1 .shelf-2 .books {
position: absolute;
top: -18px; left: 18px;
width: 54px; height: 18px;
box-sizing: border-box;
border-top: 6px solid #956B48;
border-bottom: 6px solid #956B48;
border-left: 11px solid #956B48;
border-right: 11px solid #956B48;
background: #AF7C50;
box-shadow: -6px 0 0 0 #AF7C50, 6px 0 0 0 #AF7C50;
}
.scene-1 .shelf-2 .books:before {
content: '';
position: absolute;
top: -62px; left: -15px;
width: 26px; height: 56px;
background: #756356;
box-shadow: inset 5px 0 0 0 #58433F,
inset 0 4px 0 0 #58433F,
inset 0 10px 0 0 #756356,
inset 0 16px 0 0 #58433F;
}
.scene-1 .shelf-2 .books:after {
content: '';
position: absolute;
top: -47px; left: 11px;
width: 26px; height: 41px;
background: #58433F;
box-shadow: inset 8px 0 0 0 #9C857C,
inset 0 -24px 0 0 #BEAE9D,
inset 0 7px 0 0 #BEAE9D,
inset -8px 0 0 0 #BEAE9D,
-6px 0 0 0 #58433F;
}
.scene-1 .shelf-2 .ship {
position: absolute;
top: -40px; left: 105px;
width: 127px; height: 26px;
background: #7A5548;
border-radius: 0 0 26% 0 / 0 0 100% 0;
}
.scene-1 .shelf-2 .ship:before {
content: '';
position: absolute;
top: 0px; left: -25px;
width: 25px; height: 6px;
background: #7A5548;
}
.scene-1 .shelf-2 .ship:after {
content: '';
position: absolute;
top: 12px; left: 3px;
width: 8px; height: 8px;
background: #7A5548;
transform: rotate(45deg);
box-shadow: 15px -15px 0 0 #7A5548,
30px -30px 0 0 #7A5548,
45px -45px 0 0 #7A5548,
60px -60px 0 0 #7A5548;
}
.scene-1 .shelf-2 .ship div:nth-child(1) {
position: absolute;
top: -4px; left: -13px;
width: 122px; height: 4px;
background: #3F252E;
}
.scene-1 .shelf-2 .ship div:nth-child(1):before {
content: '';
position: absolute;
top: -22px; left: 122px;
width: 10px; height: 20px;
border-radius: 17px 0 0 0;
border-top: 6px solid #3F252E;
border-left: 8px solid #3F252E;
}
.scene-1 .shelf-2 .ship div:nth-child(1):after {
content: '';
position: absolute;
top: -16px; left: 130px;
width: 10px; height: 10px;
border-radius: 10px 8px 0 0;
border-left: 10px solid #7A5548;
border-top: 10px solid #7A5548;
}
.scene-1 .shelf-2 .ship div:nth-child(2) {
position: absolute;
top: -14px; left: 0px;
width: 47px; height: 6px;
background: linear-gradient(to right, #271F28 14%,
#7A5548 15%, #7A5548 27%,
#271F28 28%, #271F28 44%,
#7A5548 45%, #7A5548 57%,
#271F28 58%, #271F28 74%,
#7A5548 75%, #7A5548 87%,
#271F28 88%);
border-top: 4px solid #3F252E;
}
.scene-1 .shelf-2 .ship div:nth-child(2):before {
content: '';
position: absolute;
top: -68px; left: 15px;
width: 4px; height: 64px;
background: #3F252E;
}
.scene-1 .shelf-2 .ship div:nth-child(2):after {
content: '';
position: absolute;
top: -68px; left: 65px;
width: 6px; height: 74px;
background: #3F252E;
}
.scene-1 .shelf-2 .ship div:nth-child(3) {
position: absolute;
top: -74px; left: 11px;
width: 21px;
height: 26px;
box-sizing: border-box;
background: #716C6B;
border: 4px solid #9C857C;
border-left: 4px solid #593640;
border-radius: 0 13px 13px 0;
}
.scene-1 .shelf-2 .ship div:nth-child(3):before {
content: '';
position: absolute;
top: 18px; left: -4px;
width: 24px;
height: 31px;
box-sizing: border-box;
border: 4px solid #9C857C;
border-left: 4px solid #593640;
background: #716C6B;
border-radius: 0 16px 16px 0;
}
.scene-1 .shelf-2 .ship div:nth-child(3):after {
content: '';
position: absolute;
top: 12px; left: 43px;
width: 38px;
height: 48px;
box-sizing: border-box;
border: 9px solid #9C857C;
border-left: 7px solid #593640;
background: #716C6B;
border-radius: 0 26px 26px 0;
}
.scene-1 .shelf-2 .ship div:nth-child(4) {
position: absolute;
top: 6px; left: -19px;
width: 136px;
height: 24px;
background: #3F252E;
border-radius: 0 0 30px 30px;
}
.scene-1 .shelf-2 .ship div:nth-child(4):before {
content: '';
position: absolute;
top: 24px; left: 28px;
width: 80px;
height: 4px;
background: #271F28;
}
.scene-1 .shelf-2 .ship div:nth-child(4):after {
content: '';
position: absolute;
top: 28px; left: 28px;
width: 5px;
height: 6px;
background: #271F28;
box-shadow: 37px 0 0 0 #271F28,
75px 0 0 0 #271F28;
}
.scene-1 .man {
position: absolute;
top: 54px; left: 189px;
width: 262px; height: 528px;
z-index: 1;
}
.scene-1 .man__body {
position: absolute;
top: 241px; left: 0px;
width: 118px; height: 61px;
background: linear-gradient(to right, #271F28 46%, #1C101C 47%);
border-radius: 0 0 100% 5% / 0 0 10% 100%;
}
.scene-1 .man__chest {
position: absolute;
bottom: 59px; left: 0px;
width: 116px; height: 157px;
transform-origin: bottom left;
animation: sceneOneManBody 10s ease infinite;
transform: rotate(10deg) translateY(0px);
}
.scene-1 .man__chest:before {
content: '';
position: absolute;
bottom: 0px; left: 0px;
width: 116px; height: 157px;
background: linear-gradient(to right, #271F28 46%, #1C101C 47%);
transform-origin: bottom left;
animation: sceneOneManChest 10s ease infinite;
border-radius: 100% 44% 0 0 / 100% 70% 0 0;
transform: scaleX(1);
}
.scene-1 .man__head {
position: absolute;
top: -98px; left: 44px;
width: 87px; height: 74px;
background: #271F28;
border-radius: 46px 13px 0 0;
transform-origin: 0 0;
animation: sceneOneManHead 10s ease infinite;
transform: rotate(-10deg) translateY(0px) translateX(0px);
}
.scene-1 .man__head:before {
content: '';
position: absolute;
top: 74px; left: 0px;
width: 68px; height: 42px;
background: linear-gradient(to right, #F6BE9C 30%, #D7957C 31%);
transform-origin: 0 0;
animation: sceneOneManNeck 10s ease infinite;
transform: rotate(34deg);
}
.scene-1 .man__head div:nth-child(1) {
position: absolute;
top: 6px; left: 52px;
width: 47px; height: 27px;
background: #F6BE9C;
border-radius: 14px 54% 0 13px / 14px 100% 0 13px;
}
.scene-1 .man__head div:nth-child(1):before {
content: '';
position: absolute;
top: 26px; left: -11px;
width: 39px;
border-left: 19px solid transparent;
border-bottom: 23px solid #F6BE9C;
}
.scene-1 .man__head div:nth-child(1):after {
content: '';
position: absolute;
top: 56px; left: 47px;
width: 10px; height: 12px;
background: #F6BE9C;
border-radius: 0 3px 10px 0;
}
.scene-1 .man__head div:nth-child(2) {
position: absolute;
top: 46px; left: 8px;
width: 24px; height: 24px;
border-radius: 50%;
background: #D7957C;
box-shadow: inset 1px 1px 0 4px #F6BE9C;
}
.scene-1 .man__head div:nth-child(2):before {
content: '';
position: absolute;
top: 12px; left: 13px;
width: 8px; height: 8px;
background: #F6BE9C;
border-radius: 50%;
}
.scene-1 .man__head div:nth-child(2):after {
content: '';
position: absolute;
top: 28px; left: -2px;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 15px solid #F6BE9C;
transform-origin: top center;
transform: rotate(36deg);
}
.scene-1 .man__head div:nth-child(3) {
position: absolute;
top: 55px; left: 24px;
width: 47px; height: 59px;
background: #271F28;
border-radius: 18px 0 0 48px;
}
.scene-1 .man__head div:nth-child(3):before {
content: '';
position: absolute;
top: 0px; left: 17px;
width: 58px; height: 19px;
background: #F6BE9C;
border-radius: 0 0 0 21px;
}
.scene-1 .man__head div:nth-child(3):after {
content: '';
position: absolute;
top: 19px; left: 47px;
width: 29px; height: 10px;
background: #271F28;
border-radius: 0 0 8px 0;
}
.scene-1 .man__head div:nth-child(4) {
position: absolute;
top: 84px; left: 71px;
width: 24px; height: 30px;
background: #271F28;
border-radius: 0 0 17px 0;
}
.scene-1 .man__head div:nth-child(4):before {
content: '';
position: absolute;
top: 0px; left: 5px;
width: 17px; height: 8px;
background: white;
border-radius: 0 0 0 10px;
animation: sceneOneManMouth 10s ease infinite;
transform: scaleY(1);
}
.scene-1 .man__head div:nth-child(4):after {
content: '';
position: absolute;
top: -34px; left: 11px;
width: 5px; height: 13px;
background: black;
border-radius: 5px;
animation: sceneOneManEye 2s ease infinite,
sceneOneManEye2 10s ease infinite;
transform: scaleY(1);
}
.scene-1 .man__head div:nth-child(5) {
position: absolute;
top: 32px; left: 70px;
width: 10px; height: 6px;
border-radius: 16px 0 0 0;
border-top: 7px solid #404040;
border-left: 7px solid #404040;
animation: sceneOneManBrow 2s ease infinite,
sceneOneManBrow2 10s ease infinite;
transform: rotate(0deg) translate(0, 0);
}
.scene-1 .man__head div:nth-child(5):before {
content: '';
position: absolute;
top: -7px; left: 6px;
width: 7px; height: 7px;
background: #404040;
border-radius: 50%;
}
.scene-1 .man__head div:nth-child(5):after {
content: '';
position: absolute;
top: 1px; left: -7px;
width: 7px; height: 7px;
background: #404040;
border-radius: 50%;
}
.scene-1 .man__arm {
position: absolute;
top: 6px; left: 12px;
width: 81px; height: 123px;
background: linear-gradient(#404040 49%, #D7957C 50%);
border-radius: 42px 42px 39px 0;
transform-origin: center top;
animation: sceneOneManArm 10s ease infinite;
transform: rotate(-34deg) translateY(0px) translateX(0px);
}
.scene-1 .man__arm:before {
content: '';
position: absolute;
top: 118px; left: 0px;
width: 40px; height: 50px;
background: #D7957C;
border-radius: 0 0 0 20px;
}
.scene-1 .man__arm:after {
content: '';
position: absolute;
top: 50px; left: -6px;
width: 93px; height: 33px;
background: #94959B;
border-radius: 5px;
}
.scene-1 .man__forearm {
position: absolute;
top: 165px; left: -31px;
width: 67px; height: 100px;
background: #F6BE9C;
border-radius: 36px 28px 60px 4px;
z-index: 1;
transform-origin: top center;
animation: sceneOneManForearm 10s ease infinite;
transform: rotate(-102deg);
}
.scene-1 .man__forearm:before {
content: '';
position: absolute;
top: 79px; left: 44px;
width: 30px; height: 54px;
background: #F6BE9C;
transform: rotate(-16deg);
border-radius: 5px 30px 15px 10px;
box-shadow: 0 14px 0 0 #D7957C;
}
.scene-1 .man__forearm:after {
content: '';
position: absolute;
top: 121px; left: 68px;
width: 9px; height: 13px;
background: #1C101C;
border-radius: 100% 0;
}
.scene-1 .man__forearm div:nth-child(2) {
position: absolute;
top: 93px; left: 1px;
width: 15px; height: 41px;
background: #F6BE9C;
transform: rotate(-17deg);
border-radius: 12px 8px 8px 11px;
box-shadow: 0 15px 0 0 #88594E;
}
.scene-1 .man__forearm div:nth-child(2):before {
content: '';
position: absolute;
top: 0px; left: 8px;
width: 20px; height: 57px;
background: #F6BE9C;
border-radius: 0 0 10px 10px;
box-shadow: 0 15px 0 0 #AF736B;
}
.scene-1 .man__forearm div:nth-child(2):after {
content: '';
position: absolute;
top: 0px; left: 21px;
width: 17px; height: 70px;
background: #F6BE9C;
border-radius: 0 0 0 13px;
box-shadow: 0 15px 0 0 #D7957C;
}
.scene-1 .man__forearm div:nth-child(1) {
position: absolute;
top: 80px; left: 45px;
width: 20px; height: 95px;
background: #F6BE9C;
transform: rotate(-17deg);
border-radius: 10px;
}
.scene-1 .man__forearm div:nth-child(1):before {
content: '';
position: absolute;
top: 40px; left: 24px;
width: 30px; height: 6px;
background: #1C101C;
transform: rotate(-37deg);
}
.scene-1 .man__forearm div:nth-child(1):after {
content: '';
position: absolute;
top: 82px; left: -31px;
width: 17px;
border-left: 11px solid transparent;
border-top: 6px solid #1C101C;
transform: rotate(-37deg);
}
.scene-1 .man__leg {
position: absolute;
top: 298px; left: 5px;
width: 222px; height: 88px;
background: linear-gradient(to right, #36779D 56%, #D7957C 57%);
border-radius: 0 69px 120px 131px / 0 75px 74px 140px;
}
.scene-1 .man__knee {
position: absolute;
top: 15px; left: 189px;
width: 47px; height: 194px;
background: linear-gradient(#D7957C 38%,
#D7D7D6 39%,
#D7D7D6 55%,
white 56%);
border-radius: 10px 40px 20px 30px;
transform-origin: 50% 0;
animation: sceneOneManKnee 10s ease infinite;
transform: rotate(23deg);
}
.scene-1 .man__knee:before {
content: '';
position: absolute;
top: 75px; left: -27px;
width: 28px; height: 64px;
background: linear-gradient(#D7D7D6 50%,
white 51%);
border-radius: 64% 0 0 100% / 50% 0 0 50%;
}
.scene-1 .man__knee:after {
content: '';
position: absolute;
top: 75px; left: -10px;
width: 13px; height: 33px;
background: #A7AEAF;
box-shadow: 30px 0 0 0 #A7AEAF;
}
.scene-1 .man__feet {
position: absolute;
top: 191px; left: 0px;
width: 93px; height: 36px;
background: #59BECF;
border-radius: 4px 29px 0 0;
transform-origin: 0 0;
transform: rotate(-20deg);
animation: sceneOneManFeet 10s ease infinite;
}
.scene-1 .man__feet:before {
content: '';
position: absolute;
top: 36px; left: -5px;
width: 101px; height: 7px;
background: #1C101C;
border-radius: 2px;
}
.scene-1 .man__feet:after {
content: '';
position: absolute;
top: -20px; left: 0px;
width: 28px; height: 23px;
background: #59BECF;
border-radius: 0 17px 0 0;
}
.scene-1 .man__feet div:nth-child(1) {
position: absolute;
top: -1px; left: -11px;
width: 38px; height: 37px;
background: #377CA6;
z-index: 1;
border-radius: 50% 50% 0 50%;
}
.scene-1 .man__feet div:nth-child(1):before {
content: '';
position: absolute;
top: 20px; left: 38px;
width: 40px; height: 17px;
background: #377CA6;
border-radius: 0 15px 0 0;
}
.scene-1 .man__feet div:nth-child(1):after {
content: '';
position: absolute;
top: -28px; left: 44px;
width: 40px; height: 20px;
background: #377CA6;
border-radius: 30px 30px 0 0;
transform: rotate(-56deg);
}
.scene-1 .man__feet div:nth-child(2) {
position: absolute;
top: -8px; left: 52px;
width: 12px; height: 20px;
background: #1C101C;
z-index: 1;
transform: rotate(-4deg);
border-radius: 6px;
}
.scene-1 .animation_to_left {
animation: sceneOneGoLeft 10s ease infinite;
}
.scene-1 .animation_to_right {
animation: sceneOneGoRight 10s ease infinite;
}
@keyframes sceneOneManEye {
0% { transform: scaleY(1); }
5% { transform: scaleY(.1); }
10% { transform: scaleY(1); }
}
@keyframes sceneOneManBrow {
2% { transform: translateY(0px); }
8% { transform: translateY(7px); }
14% { transform: translateY(0px); }
}
@keyframes sceneOneDogTail {
0% { transform: skewX(-22deg) rotate(-34deg); }
50% { transform: skewX(-22deg) rotate(16deg); }
100% { transform: skewX(-22deg) rotate(-34deg); }
}
@keyframes sceneOneDogEye {
60% { transform: scaleY(1); }
65% { transform: scaleY(.1); }
70% { transform: scaleY(1); }
}
@keyframes sceneOne {
0% { opacity: 1; z-index: 4; }
10.1% { opacity: 1; z-index: 4; }
10.2% { opacity: 0; z-index: 1; }
37.8% { opacity: 0; z-index: 2; }
61.8% { opacity: 0; z-index: 3; }
80.3% { opacity: 0; z-index: 3; }
80.4% { opacity: 1; z-index: 3; }
88.8% { opacity: 1; z-index: 4; }
100% { opacity: 1; z-index: 4; }
}
@keyframes sceneOneGoLeft {
0% { transform: translateX(0px); }
3% { transform: translateX(0px); }
10.2% { transform: translateX(-900px); }
10.8% { transform: translateX(0px); }
}
@keyframes sceneOneGoRight {
0% { transform: translateX(0px); }
3% { transform: translateX(0px); }
10.2% { transform: translateX(900px); }
10.8% { transform: translateX(0px); }
}
@keyframes sceneOneManFeet {
0% { transform: rotate(-20deg); }
12% { transform: rotate(-20deg); }
87% { transform: rotate(-17deg); }
91.8% { transform: rotate(-17deg); }
100% { transform: rotate(-20deg); }
}
@keyframes sceneOneManKnee {
0% { transform: rotate(23deg); }
12% { transform: rotate(23deg); }
87% { transform: rotate(17deg); }
91.8% { transform: rotate(13deg); }
100% { transform: rotate(23deg); }
}
@keyframes sceneOneManForearm {
0% { transform: rotate(-102deg); }
12% { transform: rotate(-102deg); }
87% { transform: rotate(-126deg); }
91.8% { transform: rotate(-126deg); }
100% { transform: rotate(-102deg); }
}
@keyframes sceneOneManArm {
0% { transform: rotate(-34deg) translateY(0px) translateX(0px); }
12% { transform: rotate(-34deg) translateY(0px) translateX(0px); }
87% { transform: rotate(-20deg) translateY(10px) translateX(52px); }
91.8% { transform: rotate(-19deg) translateY(12px) translateX(41px); }
100% { transform: rotate(-34deg) translateY(0px) translateX(0px); }
}
@keyframes sceneOneManBrow2 {
0% { transform: rotate(0deg) translate(0, 0); }
12% { transform: rotate(0deg) translate(0, 0); }
87% { transform: rotate(22deg) translate(5px, 9px); }
91.8% { transform: rotate(22deg) translate(4px, 6px); }
100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes sceneOneManEye2 {
0% { transform: scaleY(1); }
12% { transform: scaleY(1); }
87% { transform: scaleY(0.5); }
91.8% { transform: scaleY(0.5); }
100% { transform: scaleY(1); }
}
@keyframes sceneOneManMouth {
0% { transform: scaleY(1); }
12% { transform: scaleY(1); }
87% { transform: scaleY(0); }
91.8% { transform: scaleY(0); }
100% { transform: scaleY(1); }
}
@keyframes sceneOneManNeck {
0% { transform: rotate(34deg); }
12% { transform: rotate(34deg); }
87% { transform: rotate(14deg); }
91.8% { transform: rotate(34deg); }
100% { transform: rotate(34deg); }
}
@keyframes sceneOneManHead {
0% { transform: rotate(-10deg) translateY(0px) translateX(0px); }
12% { transform: rotate(-10deg) translateY(0px) translateX(0px); }
87% { transform: rotate(29deg) translateY(-50px) translateX(107px); }
91.8% { transform: rotate(-4deg) translateY(4px) translateX(53px); }
100% { transform: rotate(-10deg) translateY(0px) translateX(0px); }
}
@keyframes sceneOneManChest {
0% {
border-radius: 100% 44% 0 0 / 100% 70% 0 0;
transform: scaleX(1);
}
12% {
border-radius: 100% 44% 0 0 / 100% 70% 0 0;
transform: scaleX(1);
}
87% {
border-radius: 100% 44% 0 30px / 100% 70% 0 30px;
transform: scaleX(1.5);
}
91.8% {
border-radius: 100% 44% 0 30px / 100% 70% 0 30px;
transform: scaleX(1.5);
}
100% {
border-radius: 100% 44% 0 0 / 100% 70% 0 0;
transform: scaleX(1);
}
}
@keyframes sceneOneManBody {
0% { transform: rotate(10deg) translateY(0px); }
12% { transform: rotate(10deg) translateY(0px); }
87% { transform: rotate(10deg) translateY(21px); }
91.8% { transform: rotate(10deg) translateY(21px); }
100% { transform: rotate(10deg) translateY(0px); }
}
@keyframes sceneOneDogHead {
0% { transform: rotate(0deg); }
12% { transform: rotate(0deg); }
87% { transform: rotate(-21deg); }
91.8% { transform: rotate(-7deg); }
100% { transform: rotate(0deg); }
}
.scene-2 {
position: absolute;
top: 0px; left: 0px;
width: 800px; height: 600px;
animation: sceneTwo 10s linear infinite;
}
.scene-2 .rock {
position: absolute;
top: 378px; left: 94px;
width: 32px; height: 4px;
background: #B4394A;
animation: sceneTwoRock 10s ease infinite;
}
.scene-2 .rock:before {
content: '';
position: absolute;
top: 4px; left: 6px;
width: 26px; height: 15px;
background: #B4394A;
}
.scene-2 .rock div:nth-child(1) {
position: absolute;
top: 10px; left: 50px;
width: 40px; height: 25px;
background: #CE524A;
border-radius: 0 22px 0 0;
}
.scene-2 .rock div:nth-child(1):before {
content: '';
position: absolute;
top: 0px; left: -102px;
width: 21px;
border-left: 73px solid transparent;
border-bottom: 32px solid #ED7852;
transform: skewX(-36deg);
}
.scene-2 .rock div:nth-child(1):after {
content: '';
position: absolute;
top: 32px; left: -116px;
width: 93px; height: 12px;
background: #ED7852;
transform: skewX(-29deg);
box-shadow: 10px 0 0 0 #B4394A;
}
.scene-2 .rock div:nth-child(2) {
position: absolute;
top: 54px; left: -56px;
width: 18px;
border-left: 43px solid transparent;
border-bottom: 14px solid #CE524A;
}
.scene-2 .rock div:nth-child(2):before {
content: '';
position: absolute;
top: 0px; left: -87px;
width: 66px; height: 14px;
background: #ED7852;
transform: skewX(-72deg);
}
.scene-2 .rock div:nth-child(2):after {
content: '';
position: absolute;
top: 14px; left: -93px;
width: 108px; height: 16px;
background: #ED7852;
transform: skewX(-37deg);
box-shadow: 17px 0 0 0 #B4394A;
}
.scene-2 .rock div:nth-child(3) {
position: absolute;
top: 54px; left: 5px;
width: 20px;
border-right: 8px solid transparent;
border-top: 14px solid #B4394A;
}
.scene-2 .rock div:nth-child(3):before {
content: '';
position: absolute;
top: 16px; left: -110px;
width: 72px; height: 18px;
background: #ED7852;
transform: skewX(-36deg);
box-shadow: 21px 0 0 0 #B4394A;
}
.scene-2 .rock div:nth-child(3):after {
content: '';
position: absolute;
top: 34px; left: -130px;
width: 55px; height: 28px;
background: #CE524A;
transform: skewX(-39deg);
box-shadow: 40px 0 0 0 #B4394A;
}
.scene-2 .rock div:nth-child(4) {
position: absolute;
top: 112px; left: -41px;
width: 49px;
border-left: 13px solid transparent;
border-bottom: 18px solid #B4394A;
}
.scene-2 .rock div:nth-child(4):before {
content: '';
position: absolute;
top: 18px; left: -140px;
width: 127px; height: 70px;
background: #ED7852;
transform: skewX(-35deg);
box-shadow: 60px 0 0 0 #B4394A;
}
.scene-2 .rock div:nth-child(4):after {
content: '';
position: absolute;
top: 17px; left: -36px;
border-left: 48px solid transparent;
border-right: 40px solid transparent;
border-bottom: 71px solid #CE524A;
}
.scene-2 .rock div:nth-child(5) {
position: absolute;
top: 14px; left: 30px;
border-left: 20px solid transparent;
border-bottom: 28px solid #B4394A;
}
.scene-2 .rock div:nth-child(5):before {
content: '';
position: absolute;
top: 70px; left: -66px;
width: 95px; height: 28px;
background: #B4394A;
transform: skewX(-37deg);
box-shadow: 0 18px 0 0 #B4394A;
}
.scene-2 .rock div:nth-child(5):after {
content: '';
position: absolute;
top: 85px; left: -27px;
border-right: 22px solid transparent;
border-bottom: 40px solid #CE524A;
}
.scene-2 .rock div:nth-child(6) {
position: absolute;
top: 34px; left: 13px;
width: 16px;
border-right: 34px solid transparent;
border-left: 32px solid transparent;
border-bottom: 50px solid #B4394A;
border-radius: 0 0 7px 0;
}
.scene-2 .rock div:nth-child(6):before {
content: '';
position: absolute;
top: 49px; left: 22px;
border-left: 23px solid transparent;
border-right: 7px solid transparent;
border-bottom: 30px solid #B4394A;
}
.scene-2 .rock div:nth-child(6):after {
content: '';
position: absolute;
top: -4px; left: 10px;
border-left: 21px solid transparent;
border-right: 10px solid transparent;
border-bottom: 29px solid #B4394A;
transform: rotate(-70deg);
}
.scene-2 .rock div:nth-child(7) {
position: absolute;
top: 59px; left: -4px;
border-right: 38px solid transparent;
border-left: 38px solid transparent;
border-bottom: 24px solid #CE524A;
transform: rotate(-90deg);
}
.scene-2 .rock div:nth-child(7):before {
content: '';
position: absolute;
top: 34px; left: 2px;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
border-top: 11px solid #CE524A;
}
.scene-2 .rock div:nth-child(7):after {
content: '';
position: absolute;
top: 41px; left: 39px;
width: 9px; height: 8px;
background: #B4394A;
transform: skewX(-30deg) rotate(24deg);
}
.scene-2 .lighthouse {
position: absolute;
top: -40px; left: 32px;
width: 14px; height: 50px;
background: #CE524A;
animation: sceneTwoLighthouse 10s ease infinite;
}
.scene-2 .lighthouse:before {
content: '';
position: absolute;
top: 4px; left: -2px;
width: 18px; height: 10px;
background: #F7BD64;
border-top: 4px solid #CE524A;
border-bottom: 4px solid #CE524A;
box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1),
inset 6px 0 0 0 #4A4263,
inset -8px 0 0 0 #4A4263,
inset 0 2px 0 0 #4A4263,
inset 0 -2px 0 0 #4A4263;
}
.scene-2 .lighthouse:after {
content: '';
position: absolute;
top: 12px; left: -56px;
width: 7px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 150px solid #F7D67B;
transform-origin: top center;
transform: rotate(90deg) scaleX(1);
animation: sceneTwoLighhouse 2s ease infinite;
}
.scene-2 .girl {
position: absolute;
top: 60px; left: 236px;
width: 394px; height: 500px;
animation: sceneTwoStone 10s ease infinite;
}
.scene-2 .girl > div:nth-child(1) {
position: absolute;
top: 170px; left: 112px;
width: 150px; height: 90px;
background: #101019;
border-radius: 0 110px 4px 0;
transform-origin: right top;
animation: sceneTwoGirlHear1 10s ease infinite;
transform: rotate(-40deg) translate(0, 0);
}
.scene-2 .girl > div:nth-child(1):before {
content: '';
position: absolute;
top: -50px; left: -11px;
width: 60px; height: 80px;
background: #101019;
transform: rotate(-19deg);
}
.scene-2 .girl > div:nth-child(1):after {
content: '';
position: absolute;
top: -37px; left: 0px;
width: 60px; height: 80px;
background: #101019;
transform: rotate(-50deg);
}
.scene-2 .girl > div:nth-child(2) {
position: absolute;
top: 180px; left: 17px;
width: 90px; height: 120px;
background: #101019;
border-radius: 24px 10px 0 80px;
animation: sceneTwoGirlHear2 10s ease infinite;
transform: translate(0px, 0px) rotate(0deg);
}
.scene-2 .girl > div:nth-child(2):before {
content: '';
position: absolute;
top: -126px; left: -18px;
width: 130px; height: 153px;
background: #101019;
border-radius: 70px 0 0 60px;
transform: translate(0px, 0px);
}
.scene-2 .girl > div:nth-child(2):after {
content: '';
position: absolute;
top: -175px; left: 37px;
width: 100px; height: 100px;
background: #101019;
border-radius: 50%;
box-shadow: 45px -14px 0 -10px #101019, 80px 7px 0 -23px #101019, 20px 37px 0 -13px #101019;
transform: translate(0px, 0px) rotate(0deg);
}
.scene-2 .girl__back-leg {
position: absolute;
top: 303px; left: 170px;
width: 115px; height: 40px;
background: #943139;
border-radius: 0 14px 0 0;
transform-origin: 0 0;
transform: rotate(9deg);
}
.scene-2 .girl__back-leg:before {
content: '';
position: absolute;
top: 36px; left: 2px;
width: 100px; height: 27px;
background: #943139;
transform-origin: 0 0;
transform: rotate(-13deg);
}
.scene-2 .girl__back-leg:after {
content: '';
position: absolute;
top: 21px; left: 83px;
width: 33px; height: 160px;
background: #943139;
transform-origin: 0 0;
transform: rotate(-30deg);
}
.scene-2 .girl__foot {
position: absolute;
top: 137px; left: 166px;
width: 66px; height: 53px;
background: #943139;
transform-origin: 0 0;
transform: rotate(-21deg);
}
.scene-2 .girl__foot:before {
content: '';
position: absolute;
top: -15px; left: 9px;
width: 10px; height: 20px;
background: #943139;
transform: rotate(-20deg);
}
.scene-2 .girl__foot:after {
content: '';
position: absolute;
top: -1px; left: 10px;
width: 30px; height: 10px;
background: #943139;
transform: rotate(20deg);
}
.scene-2 .girl__foot-thumbs {
position: absolute;
top: 94px;left: 232px;
width: 12px; height: 14px;
background: #943139;
border-radius: 2px 10px 10px 0;
transform: rotate(10deg);
}
.scene-2 .girl__foot-thumbs:before {
content: '';
position: absolute;
top: 11px; left: -3px;
width: 10px; height: 17px;
background: #943139;
transform: rotate(23deg);
}
.scene-2 .girl__foot-thumbs:after {
content: '';
position: absolute;
top: 11px; left: 2px;
width: 10px; height: 25px;
background: #943139;
border-radius: 0 90% 100% 0;
}
.scene-2 .girl__paper {
position: absolute;
top: -44px;left: 84px;
width: 60px; height: 72px;
background: #E7CEB5;
box-shadow: 8px -22px 0 -8px #E7CEB5;
transform-origin: bottom left;
transform: rotate(57deg) translate(0px, 0px);
}
.scene-2 .girl__paper:before {
content: '';
position: absolute;
top: -14px; left: 0px;
border-top: 14px solid transparent;
border-right: 16px solid #DAAA8A;
}
.scene-2 .girl__paper:after {
content: '';
position: absolute;
top: 37px; left: 12px;
width: 40px; height: 5px;
background: #D09B88;
border-radius: 2px;
}
.scene-2 .girl__back-arm {
position: absolute;
top: 248px; left: 130px;
width: 109px; height: 22px;
background: #943139;
border-radius: 0 10px 20px 0;
transform-origin: 0 0;
animation: sceneTwoGirlBackArm 10s ease infinite;
transform: rotate(-30deg) translate(0px, 0px);
}
.scene-2 .girl__back-arm:before {
content: '';
position: absolute;
top: -11px; left: 15px;
width: 90px; height: 15px;
background: #943139;
transform-origin: 0 0;
transform: rotate(7deg);
}
.scene-2 .girl__back-arm:after {
content: '';
position: absolute;
top: 0px; left: 104px;
width: 24px; height: 9px;
background: #943139;
border-radius: 0 2px 10px 0;
transform-origin: 0 0;
transform: rotate(16deg);
}
.scene-2 .girl__chest {
position: absolute;
top: 121px; left: 93px;
width: 50px; height: 83px;
background: #5A8C8C;
border-radius: 49px 0 0 0;
transform-origin: left bottom;
animation: sceneTwoGirlChest 10s ease infinite;
transform: rotate(-12deg);
}
.scene-2 .girl__chest:after {
content: '';
position: absolute;
top: 9px; left: 0px;
width: 83px; height: 92px;
background: #5A8C8C;
border-radius: 35px 59px 0 0;
transform-origin: right bottom;
transform: rotate(13deg);
}
.scene-2 .girl__chest:before {
content: '';
position: absolute;
top: 79px; left: 0px;
width: 65px; height: 27px;
background: #9C2141;
transform-origin: 0 0;
animation: sceneTwoGirlStomack 10s ease infinite;
transform: rotate(16deg);
}
.scene-2 .girl__back-shorts {
position: absolute;
top: 290px; left: 110px;
width: 67px; height: 75px;
box-sizing: border-box;
background: #27445A;
border-right: 25px solid #798C8D;
}
.scene-2 .girl__back-shorts:before {
content: '';
position: absolute;
top: -72px; left: -18px;
width: 60px; height: 55px;
background: #BD4242;
transform-origin: 0 0;
transform: rotate(26deg);
}
.scene-2 .girl__back-shorts:after {
content: '';
position: absolute;
top: -72px; left: -18px;
width: 64px; height: 60px;
background: #BD4242;
transform-origin: 0 0;
transform: rotate(13deg);
}
.scene-2 .girl__front-leg {
position: absolute;
top: 270px; left: 137px;
width: 110px; height: 61px;
background: #BD4242;
border-radius: 0 44% 23px 0;
transform-origin: 0 0;
transform: rotate(-28deg);
}
.scene-2 .girl__front-leg:before {
content: '';
position: absolute;
top: 31px; left: 0px;
width: 90px; height: 40px;
background: #BD4242;
border-radius: 0 0 94% 0;
}
.scene-2 .girl__front-leg:after {
content: '';
position: absolute;
top: 20px; left: 72px;
width: 20px; height: 140px;
background: #BD4242;
transform-origin: 0 0;
transform: rotate(12deg);
}
.scene-2 .girl__knee {
position: absolute;
top: 41px;left: 89px;
width: 20px; height: 160px;
background: #BD4242;
transform-origin: 0 0;
transform: rotate(17deg);
}
.scene-2 .girl__knee:before {
content: '';
position: absolute;
top: 96px; left: -30px;
width: 30px; height: 50px;
background: #BD4242;
border-radius: 20px 0 0 0;
}
.scene-2 .girl__knee:after {
content: '';
position: absolute;
top: 14px; left: -191px;
width: 70px; height: 76px;
background: #354E6F;
border-radius: 22px 0 0 50px;
transform-origin: 0 0;
transform: rotate(-15deg);
}
.scene-2 .girl__shorts {
position: absolute;
top: 267px; left: 67px;
width: 60px; height: 80px;
background: #354E6F;
border-radius: 0 0 0 56px;
transform-origin: 0 0;
transform: rotate(22deg);
}
.scene-2 .girl__shorts:before {
content: '';
position: absolute;
top: -27px; left: 62px;
width: 83px; height: 32px;
background: #9CB5BD;
transform-origin: 0 0;
transform: rotate(40deg);
}
.scene-2 .girl__front-arm {
position: absolute;
top: 103px; left: 124px;
width: 135px; height: 23px;
background: #BD4242;
border-radius: 20px 11px 2px 0;
transform-origin: 0 0;
animation: sceneTwoGirlFromArm 10s ease infinite;
transform: rotate(27deg) translate(0px, 0px);
}
.scene-2 .girl__front-arm:before {
content: '';
position: absolute;
top: 22px; left: 0px;
width: 135px; height: 25px;
background: #BD4242;
border-radius: 0 0 18px 23px;
transform-origin: 0 0;
transform: rotate(-6deg);
}
.scene-2 .girl__front-arm:after {
content: '';
position: absolute;
top: 30px; left: 128px;
width: 20px; height: 134px;
background: #BD4242;
border-radius: 6px 0 0 20px;
transform-origin: 0 0;
animation: sceneTwoGirlTriceps 10s ease infinite;
transform: rotate(198deg);
}
.scene-2 .girl__forearm {
position: absolute;
top: 13px;left: 99px;
width: 100px; height: 13px;
background: #BD4242;
transform-origin: 0 0;
animation: sceneTwoGirlForearm 10s ease infinite;
transform: rotate(-67deg);
}
.scene-2 .girl__forearm:before {
content: '';
position: absolute;
top: -4px; left: 98px;
width: 35px; height: 10px;
background: #BD4242;
border-radius: 4px;
transform-origin: 0 0;
transform: rotate(-29deg);
}
.scene-2 .girl__forearm:after {
content: '';
position: absolute;
top: -10px; left: 100px;
width: 23px; height: 16px;
background: #BD4242;
}
.scene-2 .girl__palm {
position: absolute;
top: -18px;left: 104px;
width: 10px; height: 26px;
background: #BD4242;
border-radius: 6px 0 0 0;
transform-origin: 0 0;
transform: rotate(26deg);
}
.scene-2 .girl__palm:before {
content: '';
position: absolute;
top: -9px; left: 2px;
width: 10px; height: 17px;
background: #BD4242;
border-radius: 0 8px 0 3px;
transform: rotate(20deg);
}
.scene-2 .girl__palm:after {
content: '';
position: absolute;
top: -24px; left: 9px;
width: 6px; height: 21px;
background: #101019;
border-radius: 0 0 10px 0;
transform: rotate(-16deg);
}
.scene-2 .girl__face {
position: absolute;
top: -48px; left: 73px;
width: 42px; height: 40px;
background: #BD4242;
border-radius: 50%;
transform-origin: 0 0;
animation: sceneTwoGirlFace 10s ease infinite;
transform: rotate(0deg) translate(0px, 0px);
}
.scene-2 .girl__face:before {
content: '';
position: absolute;
top: 32px; left: 0px;
width: 35px; height: 50px;
background: #BD4242;
border-radius: 0 0 4px 0;
transform-origin: top right;
transform: rotate(25deg);
}
.scene-2 .girl__face:after {
content: '';
position: absolute;
top: 16px; left: -36px;
width: 40px; height: 40px;
background: #101019;
border-radius: 50%;
}
.scene-2 .girl__nose {
position: absolute;
top: 33px; left: 18px;
width: 16px; height: 28px;
background: #BD4242;
border-radius: 0 0 8px 0;
transform: rotate(-9deg) translate(0, 0);
}
.scene-2 .girl__nose:before {
content: '';
position: absolute;
top: -13px; left: -2px;
width: 23px; height: 10px;
background: #101019;
border-radius: 20px;
animation: sceneTwoGirlBrow 10s ease infinite;
transform: rotate(51deg);
}
.scene-2 .girl__nose:after {
content: '';
position: absolute;
top: 1px; left: -7px;
width: 17px; height: 5px;
background: #101019;
border-radius: 4px;
animation: sceneTwoGirlEye 10s ease infinite;
transform: rotate(47deg);
}
.scene-2 .stone {
position: absolute;
top: 422px; left: 203px;
width: 350px; height: 138px;
border-radius: 110px 180px 0 0 / 82px 130px 0 0;
background: linear-gradient(-50deg, #4A4263 45%,
#413452 46%,
#413452 62%,
#352C49 63%);
animation: sceneTwoStone 10s ease infinite;
}
.scene-2 .stone:before {
content: '';
position: absolute;
top: 66px; left: -90px;
width: 97px; height: 76px;
background: #352C49;
border-radius: 48px 0 0 0;
}
.scene-2 .stone:after {
content: '';
position: absolute;
top: 96px; left: -141px;
width: 106px; height: 46px;
background: #352C49;
border-radius: 50px 50px 0 0;
box-shadow: 524px 6px 0 0 #352C49;
}
.scene-2 .basket {
position: absolute;
top: 516px; left: 248px;
width: 50px; height: 50px;
box-sizing: border-box;
background: #413452;
border-radius: 50%;
box-shadow: inset 0 0 0 12px #CA415A,
inset 0 0 0 18px #EECD19;
animation: sceneTwoStone 10s ease infinite;
}
.scene-2 .basket:before {
content: '';
position: absolute;
top: 1px; left: -105px;
width: 61px; height: 12px;
background: #D69338;
transform: rotate(-44deg);
box-shadow: 0px 3px 0 0 #677321,
3px 15px 0 0 #B4394A,
3px 20px 0 0 #7B3231,
-7px 32px 0 0 #D69338;
}
.scene-2 .basket:after {
content: '';
position: absolute;
top: -7px; left: -26px;
width: 15px; height: 43px;
background: #C47533;
border-radius: 8px;
}
.scene-2 .basket div:nth-child(1) {
position: absolute;
top: 16px; left: -53px;
width: 60px; height: 8px;
background: #8C9421;
border-radius: 10px 10px 0 0;
}
.scene-2 .basket div:nth-child(1):before {
content: '';
position: absolute;
top: 8px; left: -33px;
width: 136px; height: 30px;
background: #C47533;
border-top: 6px solid #E7AD39;
z-index: 1;
}
.scene-2 .basket div:nth-child(1):after {
content: '';
position: absolute;
top: 22px; left: -33px;
width: 21px; height: 17px;
background: #7B3231;
z-index: 1;
border-radius: 0 15px 0 0;
}
.scene-2 .basket div:nth-child(2) {
position: absolute;
top: 30px; left: -44px;
width: 52px; height: 24px;
box-sizing: border-box;
background: #E7AD39;
z-index: 1;
border-radius: 0 0 25px 25px;
border-left: 8px solid #7B3231;
border-bottom: 8px solid #7B3231;
border-right: 8px solid #7B3231;
}
.scene-2 .basket div:nth-child(2):before {
content: '';
position: absolute;
top: -14px; left: 6px;
width: 14px; height: 20px;
background: #C47533;
border-radius: 0 0 12px 12px;
border: 5px solid #101019;
border-top: 0;
}
.scene-2 .basket div:nth-child(2):after {
content: '';
position: absolute;
top: 20px; left: -50px;
width: 48px; height: 10px;
background: #7B3231;
border-radius: 0 10px 0 0;
}
.scene-2 .sand {
position: absolute;
bottom: 0px; left: 0px;
width: 500px; height: 40px;
background: #677321;
animation: sceneTwoStone 10s ease infinite;
}
.scene-2 .sand:before {
content: '';
position: absolute;
bottom: 0px; left: 0px;
width: 810px; height: 18px;
background: #E7AD39;
}
.scene-2 .sand:after {
content: '';
position: absolute;
top: 14px; left: 135px;
width: 190px; height: 8px;
background: #E7AD39;
border-radius: 10px 0 0 0;
}
.scene-2 .sand div {
position: absolute;
top: 8px; left: 240px;
width: 117px; height: 14px;
background: #E7AD39;
border-radius: 0 15px 0 0;
}
.scene-2 .sand div:before {
content: '';
position: absolute;
top: -15px; left: 0px;
width: 71px; height: 15px;
background: #E7AD39;
border-radius: 0 20px 0 0;
}
.scene-2 .sand div:after {
content: '';
position: absolute;
top: 0px; left: -10px;
width: 75px; height: 10px;
background: #E7AD39;
z-index: 1;
border-radius: 10px 0 0 0;
}
.scene-2 .crab {
position: absolute;
bottom: 25px; left: 28px;
width: 60px; height: 30px;
animation: sceneTwoCrab 10s linear infinite,
sceneTwoStone 10s ease infinite;
transform: translateX(0px);
}
.scene-2 .crab div:nth-child(1) {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 60px; height: 30px;
background: linear-gradient(#9C2141 49%, #E7CEB5 50%);
border-radius: 10px;
animation: sceneTwoCrabBody 10s linear infinite;
transform: rotate(0deg) translate(0px, 0px);
}
.scene-2 .crab div:nth-child(1):before {
content: '';
position: absolute;
top: -7px; left: 14px;
width: 8px; height: 9px;
background: white;
border-radius: 2px;
box-shadow: 24px 0 0 0 white;
}
.scene-2 .crab div:nth-child(2) {
position: absolute;
top: -29px; left: -32px;
width: 15px; height: 44px;
background: #9C2141;
border-radius: 10px 0 0 10px;
animation: sceneTwoCrabLeftArm 10s linear infinite;
}
.scene-2 .crab div:nth-child(2):before {
content: '';
position: absolute;
top: 6px; left: 15px;
width: 13px; height: 18px;
background: #641939;
border-radius: 0 15px 0 0;
}
.scene-2 .crab div:nth-child(2):after {
content: '';
position: absolute;
top: 24px; left: 15px;
width: 13px; height: 20px;
background: #9C2141;
border-radius: 0 0 10px 0;
}
.scene-2 .crab div:nth-child(3) {
position: absolute;
top: -35px; left: 79px;
width: 15px; height: 44px;
background: #9C2141;
border-radius: 0 10px 10px 0;
animation: sceneTwoCrabRightArm 10s linear infinite;
transform: rotate(0deg) translate(0px, 0px);
}
.scene-2 .crab div:nth-child(3):before {
content: '';
position: absolute;
top: 6px; left: -13px;
width: 13px; height: 18px;
background: #641939;
border-radius: 15px 0 0 0;
}
.scene-2 .crab div:nth-child(3):after {
content: '';
position: absolute;
top: 24px; left: -13px;
width: 13px; height: 20px;
background: #9C2141;
border-radius: 0 0 0 10px;
}
.scene-2 .crab div:nth-child(4) {
position: absolute;
top: 21px; left: -18px;
width: 17px; height: 16px;
background: #641939;
border-radius: 0 0 100% 0;
animation: sceneTwoCrabLeg1 10s linear infinite;
transform: rotate(-20deg) translate(0px, 0px);
}
.scene-2 .crab div:nth-child(5) {
position: absolute;
top: 21px; left: 2px;
width: 14px; height: 16px;
background: #9C2141;
border-radius: 0 0 100% 0;
animation: sceneTwoCrabLeg2 10s linear infinite;
transform: rotate(0deg) translate(0px, 0px);
}
.scene-2 .crab div:nth-child(6) {
position: absolute;
top: 21px; left: 46px;
width: 16px; height: 16px;
background: #9C2141;
border-radius: 0 0 0 100%;
animation: sceneTwoCrabLeg3 10s linear infinite;
transform: rotate(0deg) translate(0px, 0px);
}
.scene-2 .crab div:nth-child(7) {
position: absolute;
top: 21px; left: 64px;
width: 16px; height: 16px;
background: #641939;
border-radius: 0 0 0 100%;
animation: sceneTwoCrabLeg4 10s linear infinite;
transform: rotate(0deg) translate(0px, 0px);
}
.scene-2 .bg-1 {
position: absolute;
top: 0px; left: 0px;
width: 800px; height: 300px;
background: #9C3163;
border-radius: 0 0 90px 90px;
animation: sceneTwoBg1 10s ease infinite;
}
.scene-2 .bg-2 {
position: absolute;
top: -30px; left: -47px;
width: 220px; height: 220px;
background: #CA415A;
border-radius: 50%;
animation: sceneTwoBg2 10s ease infinite;
}
.scene-2 .bg-2:before {
content: '';
position: absolute;
top: 33px; left: 144px;
width: 200px; height: 200px;
background: #CA415A;
border-radius: 50%;
}
.scene-2 .bg-3 {
position: absolute;
top: -41px; right: -44px;
width: 200px; height: 200px;
background: #CA415A;
border-radius: 50%;
animation: sceneTwoBg3 10s ease infinite;
}
.scene-2 .bg-3:before {
content: '';
position: absolute;
top: 68px; left: -230px;
width: 200px; height: 200px;
background: #CA415A;
border-radius: 50%;
}
.scene-2 .bg-3:after {
content: '';
position: absolute;
top: 93px; left: -117px;
width: 110px; height: 110px;
background: #CA415A;
border-radius: 50%;
box-shadow: 100px -7px 0 10px #CA415A;
}
.scene-2 .bg-4 {
position: absolute;
top: 36px; left: -127px;
width: 220px; height: 220px;
background: #ED7852;
border-radius: 50%;
box-shadow: 442px 10px 0 0 #ED7852,
782px -21px 0 0 #ED7852,
302px 69px 0 0 #ED7852,
112px 140px 0 0 #ED7852,
262px 150px 0 0 #ED7852,
542px 110px 0 0 #ED7852,
772px 70px 0 0 #ED7852;
animation: sceneTwoBg4 10s ease infinite;
}
.scene-2 .bg-4:before {
content: '';
position: absolute;
top: 58px; left: 156px;
width: 140px; height: 140px;
background: #ED7852;
border-radius: 50%;
box-shadow: 509px 15px 0 0 #ED7852;
}
.scene-2 .bg-4:after {
content: '';
position: absolute;
top: 110px; left: 260px;
width: 80px; height: 80px;
background: #ED7852;
border-radius: 50%;
box-shadow: 378px -16px 0 0 #ED7852,
488px -35px 0 0 #ED7852;
}
.scene-2 .bg-5 {
position: absolute;
top: 199px; left: -140px;
width: 220px; height: 220px;
background: #FC9250;
border-radius: 50%;
box-shadow: 500px 20px 0 0 #FC9250,
635px -15px 0 0 #FC9250,
805px 135px 0 0 #FC9250,
605px 75px 0 0 #FC9250,
335px 125px 0 0 #FC9250,
105px 125px 0 0 #FC9250;
animation: sceneTwoBg5 10s ease infinite;
}
.scene-2 .bg-5:before {
content: '';
position: absolute;
top: 110px; left: 340px;
width: 100px; height: 40px;
background: #FC9250;
border-radius: 50%;
box-shadow: 538px 6px 0 0 #FC9250;
}
.scene-2 .bg-5:after {
content: '';
position: absolute;
top: 112px; left: 222px;
width: 170px; height: 170px;
background: #FC9250;
border-radius: 50%;
box-shadow: 510px -70px 0 0 #FC9250;
}
.scene-2 .bg-6 {
position: absolute;
bottom: 0px; left: 559px;
width: 260px; height: 260px;
background: #F7BD64;
border-radius: 50%;
box-shadow: -751px 8px 0 0 #F7BD64,
-204px 38px 0 0 #F7BD64;
animation: sceneTwoBg6 10s ease infinite;
}
.scene-2 .bg-6:before {
content: '';
position: absolute;
top: 50px; left: -385px;
width: 150px; height: 150px;
background: #F7BD64;
border-radius: 50%;
box-shadow: 84px 20px 0 0 #F7BD64,
-186px 10px 0 0 #F7BD64,
-86px 30px 0 0 #F7BD64;
}
.scene-2 .water {
position: absolute;
bottom: 18px; right: 0px;
width: 470px; height: 21px;
background: white;
z-index: 1;
animation: sceneTwoWater 10s ease infinite;
}
.scene-2 .water:before {
content: '';
position: absolute;
top: -11px; left: -45px;
width: 55px; height: 32px;
background: white;
border-radius: 30px 30px 0 0;
}
.scene-2 .water:after {
content: '';
position: absolute;
top: 9px; left: -60px;
width: 20px; height: 12px;
background: white;
border-radius: 14px 0 0 0;
}
.scene-2 .water div:nth-child(1) {
position: absolute;
top: -12px; left: 102px;
width: 230px; height: 12px;
background: white;
border-radius: 20px 0 0 0;
box-shadow: 183px -9px 0 0 white;
}
.scene-2 .water div:nth-child(1):before {
content: '';
position: absolute;
top: -31px; left: 43px;
width: 102px; height: 45px;
background: white;
border-radius: 120px 120px 0 0;
}
.scene-2 .water div:nth-child(1):after {
content: '';
position: absolute;
top: -15px; left: 210px;
width: 79px; height: 10px;
background: white;
border-radius: 10px 10px 0 0;
}
.scene-2 .water div:nth-child(2) {
position: absolute;
top: -40px; left: 320px;
width: 39px; height: 22px;
background: white;
border-radius: 50px 50px 0 0;
}
.scene-2 .water div:nth-child(2):before {
content: '';
position: absolute;
top: -7px; left: -74px;
width: 12px; height: 12px;
background: white;
border-radius: 50%;
box-shadow: 93px 0 0 0 white;
}
.scene-2 .water div:nth-child(2):after {
content: '';
position: absolute;
top: -37px; left: -74px;
width: 5px; height: 5px;
background: white;
border-radius: 50%;
box-shadow: 18px 15px 0 0 white, 124px 13px 0 0 white;
}
.scene-2 .water div:nth-child(4) {
position: absolute;
top: 7px; left: 66px;
width: 408px; height: 6px;
background: #0297DA;
border-radius: 0 0 0 10px;
}
.scene-2 .water div:nth-child(4):before {
content: '';
position: absolute;
top: 6px; left: 0px;
width: 86px; height: 8px;
background: white;
border-radius: 0 10px 0 0;
}
.scene-2 .water div:nth-child(4):after {
content: '';
position: absolute;
top: 4px; left: 215px;
width: 210px; height: 10px;
background: white;
border-radius: 10px 0 0 0;
}
.scene-2 .water div:nth-child(3) {
position: absolute;
top: 0px; left: 131px;
width: 360px; height: 10px;
background: #0297DA;
border-radius: 10px 0 0 0;
}
.scene-2 .water div:nth-child(3):before {
content: '';
position: absolute;
top: 0px; left: 272px;
width: 80px; height: 11px;
background: white;
border-radius: 11px 0 0 0;
z-index: 1;
}
.scene-2 .water div:nth-child(3):after {
content: '';
position: absolute;
top: -11px; left: 195px;
width: 150px; height: 11px;
background: #0297DA;
border-radius: 11px 0 0;
}
@keyframes sceneTwoCrab {
0% { transform: translateX(0px); }
15% { transform: translateX(0px); }
16.2% { transform: translateX(4px); }
19.8% { transform: translateX(11px); }
100% { transform: translateX(11px); }
}
@keyframes sceneTwoCrabBody {
0% { transform: rotate(0deg) translate(0px, 0px); }
12.6% { transform: rotate(-2deg) translate(0px, 0px); }
13.2% { transform: rotate(-3deg) translate(0px, 0px); }
15% { transform: rotate(1deg) translate(5px, -2px); }
19.8% { transform: rotate(3deg) translate(5px, -2px); }
24% { transform: rotate(3deg) translate(5px, -6px); }
27% { transform: rotate(6deg) translate(12px, -13px); }
30% { transform: rotate(-8deg) translate(-6px, -15px); }
100% { transform: rotate(-8deg) translate(-6px, -15px); }
}
@keyframes sceneTwoCrabLeftArm {
13.2% { transform: rotate(0deg) translate(0px, 0px); }
15% { transform: rotate(0deg) translate(4px, -1px); }
16.2% { transform: rotate(0deg) translate(5px, -6px); }
19.8% { transform: rotate(6deg) translate(9px, -20px); }
24% { transform: rotate(21deg) translate(10px, -28px); }
27% { transform: rotate(21deg) translate(17px, -34px); }
30% { transform: rotate(-19deg) translate(-13px, -6px); }
100% { transform: rotate(-19deg) translate(-13px, -6px); }
}
@keyframes sceneTwoCrabRightArm {
0% { transform: rotate(0deg) translate(0px, 0px); }
12.6% { transform: rotate(0deg) translate(0px, 0px); }
13.2% { transform: rotate(-5deg) translate(-3px, -3px); }
15% { transform: rotate(1deg) translate(4px, -1px); }
16.2% { transform: rotate(15deg) translate(10px, 4px); }
19.8% { transform: rotate(58deg) translate(33px, -1px); }
24% { transform: rotate(58deg) translate(27px, -1px); }
27% { transform: rotate(58deg) translate(27px, -15px); }
30% { transform: rotate(-26deg) translate(-15px, -40px); }
100% { transform: rotate(-26deg) translate(-15px, -40px); }
}
@keyframes sceneTwoCrabLeg1 {
0% { transform: rotate(-20deg) translate(0px, 0px); }
15% { transform: rotate(-20deg) translate(0px, 0px); }
16.2% { transform: rotate(-20deg) translate(3px, -6px); }
19.8% { transform: rotate(0deg) translate(5px, 0px); }
100% { transform: rotate(0deg) translate(5px, 0px); }
}
@keyframes sceneTwoCrabLeg2 {
0% { transform: rotate(0deg) translate(0px, 0px); }
12.6% { transform: rotate(0deg) translate(0px, 0px); }
13.2% { transform: rotate(-6deg) translate(1px, -4px); }
15% { transform: rotate(-6deg) translate(12px, 0px); }
16.2% { transform: rotate(1deg) translate(9px, 0px); }
19.8% { transform: rotate(1deg) translate(4px, 0px); }
100% { transform: rotate(1deg) translate(4px, 0px); }
}
@keyframes sceneTwoCrabLeg3 {
0% { transform: rotate(0deg) translate(0px, 0px); }
12.6% { transform: rotate(0deg) translate(0px, 0px); }
13.2% { transform: rotate(-12deg) translate(3px, -4px); }
15% { transform: rotate(5deg) translate(10px, -2px); }
16.2% { transform: rotate(2deg) translate(10px, 0px); }
19.8% { transform: rotate(2deg) translate(4px, 0px); }
100% { transform: rotate(2deg) translate(4px, 0px); }
}
@keyframes sceneTwoCrabLeg4 {
0% { transform: rotate(0deg) translate(0px, 0px); }
15% { transform: rotate(0deg) translate(0px, 0px); }
16.2% { transform: rotate(-30deg) translate(4px, -5px); }
19.8% { transform: rotate(0deg) translate(5px, 0px); }
100% { transform: rotate(0deg) translate(5px, 0px); }
}
@keyframes sceneTwoLighhouse {
0% { transform: rotate(90deg) scaleX(1); }
50% { transform: rotate(90deg) scaleX(2); }
100% { transform: rotate(90deg) scaleX(1); }
}
@keyframes sceneTwoGirlHear1 {
0% { transform: rotate(-40deg) translate(0, 0); }
10.8% { transform: rotate(-40deg) translate(0, 0); }
16.2% { transform: rotate(-40deg) translate(25px, 7px); }
21% { transform: rotate(-40deg) translate(-13px, -33px); }
100% { transform: rotate(-40deg) translate(-13px, -33px); }
}
@keyframes sceneTwoGirlHear2 {
0% { transform: translate(0px, 0px) rotate(0deg); }
10.8% { transform: translate(0px, 0px) rotate(0deg); }
16.2% { transform: translate(18px, 9px) rotate(-15deg); }
21% { transform: translate(7px, 9px) rotate(-20deg); }
100% { transform: translate(7px, 9px) rotate(-20deg); }
}
@keyframes sceneTwoGirlBackArm {
0% { transform: rotate(-30deg) translate(0px, 0px); }
10.8% { transform: rotate(-30deg) translate(0px, 0px); }
16.2% { transform: rotate(-37deg) translate(-19px, 0px); }
21% { transform: rotate(-33deg) translate(-32px, -16px); }
100% { transform: rotate(-33deg) translate(-32px, -16px); }
}
@keyframes sceneTwoGirlChest {
0% { transform: rotate(-12deg) translate(0px, 0px); }
10.8% { transform: rotate(-12deg) translate(0px, 0px); }
16.2% { transform: rotate(-12deg) translate(0px, 0px); }
21% {transform: rotate(-32deg) translate(-3px, 0px); }
100% {transform: rotate(-32deg) translate(-3px, 0px); }
}
@keyframes sceneTwoGirlStomack {
0% { transform: rotate(16deg) scaleY(1) scaleX(1) translate(0px, 0px); }
10.8% { transform: rotate(16deg) scaleY(1) scaleX(1) translate(0px, 0px); }
16.2% { transform: rotate(16deg) scaleY(1) scaleX(1) translate(0px, 0px); }
21% { transform: rotate(26deg) scaleY(2.2) scaleX(0.94) translate(2px, -10px); }
100% { transform: rotate(26deg) scaleY(2.2) scaleX(0.94) translate(2px, -10px); }
}
@keyframes sceneTwoGirlFromArm {
0% { transform: rotate(27deg) translate(0px, 0px); }
10.8% { transform: rotate(27deg) translate(0px, 0px); }
16.2% { transform: rotate(25deg) translate(-8px, 2px); }
21% { transform: rotate(-3deg) translate(-48px, 0px); }
100% { transform: rotate(-3deg) translate(-48px, 0px); }
}
@keyframes sceneTwoGirlTriceps {
0% { transform: rotate(198deg) translate(0px, 0px); }
10.8% { transform: rotate(198deg) translate(0px, 0px); }
16.2% { transform: rotate(200deg) translate(0px, 0px); }
21% { transform: rotate(264deg) translate(0px, -20px); }
100% { transform: rotate(264deg) translate(0px, -20px); }
}
@keyframes sceneTwoGirlForearm {
0% { transform: rotate(-67deg) translate(0px, 0px); }
10.8% { transform: rotate(-67deg) translate(0px, 0px); }
16.2% { transform: rotate(-62deg) translate(0px, 0px); }
21% { transform: rotate(-2deg) translate(18px, -12px); }
100% { transform: rotate(-2deg) translate(18px, -12px); }
}
@keyframes sceneTwoGirlFace {
0% { transform: rotate(0deg) translate(0px, 0px); }
10.8% { transform: rotate(0deg) translate(0px, 0px); }
16.2% { transform: rotate(-16deg) translate(-26px, -16px); }
21% { transform: rotate(-1deg) translate(-6px, -2px); }
}
@keyframes sceneTwoGirlBrow {
0% { transform: rotate(51deg); }
10.8% { transform: rotate(51deg); }
16.2% { transform: rotate(43deg); }
100% { transform: rotate(43deg); }
}
@keyframes sceneTwoGirlEye {
0% { transform: rotate(47deg); }
10.8% { transform: rotate(47deg); }
16.2% { transform: rotate(36deg); }
100% { transform: rotate(36deg); }
}
@keyframes sceneTwo {
0% { opacity: 0; z-index: 3; }
3.5% { opacity: 0; z-index: 3; }
3.6% { opacity: 1; z-index: 3; }
10.2% { opacity: 1; z-index: 4; }
37.7% { opacity: 1; z-index: 4; }
37.8% { opacity: 0; z-index: 1; }
61.8% { opacity: 0; z-index: 2; }
88.8% { opacity: 0; z-index: 3; }
100% { opacity: 0; z-index: 3; }
}
@keyframes sceneTwoBg1 {
0% { transform: translateY(0px); }
30.6% { transform: translateY(0px); }
34.8% { transform: translateY(600px); }
100% { transform: translateY(600px); }
}
@keyframes sceneTwoBg2 {
0% { transform: translate(0px, 0px); }
31.2% { transform: translate(0px, 0px); }
34.2% { transform: translate(-400px, -10px); }
100% { transform: translate(-400px, -10px); }
}
@keyframes sceneTwoBg3 {
0% { transform: translate(0px, 0px); }
31.2% { transform: translate(0px, 0px); }
34.2% { transform: translate(-870px, 30px); }
100% { transform: translate(-870px, 30px); }
}
@keyframes sceneTwoBg4 {
0% { transform: translate(0px, 0px); }
31.8% { transform: translate(0px, 0px); }
35.4% { transform: translate(930px, 10px); }
100% { transform: translate(930px, 10px); }
}
@keyframes sceneTwoBg5 {
0% { transform: translate(0px, 0px); }
32.4% { transform: translate(0px, 0px); }
36.6% { transform: translate(-940px, 10px); }
100% { transform: translate(-940px, 10px); }
}
@keyframes sceneTwoBg6 {
0% { transform: translate(0px, 0px); }
32.4% { transform: translate(0px, 0px); }
36.6% { transform: translate(1000px, 10px); }
100% { transform: translate(1000px, 10px); }
}
@keyframes sceneTwoRock {
0% { transform: translate(0px, 0px); }
31.8% { transform: translate(0px, 0px); }
35.4% { transform: translate(-193px, 0px); }
100% { transform: translate(-193px, 0px); }
}
@keyframes sceneTwoStone {
0% { transform: translate(0px, 0px); }
33.6% { transform: translate(0px, 0px); }
37.8% { transform: translate(-750px, 0px); }
100% { transform: translate(-750px, 0px); }
}
@keyframes sceneTwoWater {
0% { transform: translate(160px, 0px); }
7.8% { transform: translate(160px, 0px); }
19.2% { transform: translate(0px, 0px); }
21% { transform: translate(0px, 0px); }
33.6% { transform: translate(160px, 0px); }
37.8% { transform: translate(480px, 0px); }
100% { transform: translate(480px, 0px); }
}
.scene-3 {
position: absolute;
top: 0px; left: 0px;
width: 800px; height: 600px;
animation: sceneThree 10s linear infinite;
}
.scene-3 .road {
position: absolute;
top: 0px; left: 0px;
animation: sceneThreeRoad 10s ease infinite;
}
.scene-3 .car {
position: absolute;
top: 0px; left: 0px;
animation: sceneThreeCar 1s ease infinite;
animation-delay: .1s;
}
.scene-3 .car > div:nth-child(1) {
position: absolute;
top: 102px; left: 318px;
width: 279px; height: 166px;
background: #424A6B;
border-radius: 0 20px 0 0;
box-shadow: inset 0 7px 0 0 #526B94;
}
.scene-3 .car > div:nth-child(1):before {
content: '';
position: absolute;
top: -10px; left: 163px;
width: 100px; height: 208px;
background: #424A6B;
box-shadow: inset -11px 0 0 -1px #526B94;
border-radius: 0 26px 0 0;
transform-origin: right top;
transform: rotate(-36deg);
}
.scene-3 .car > div:nth-child(1):after {
content: '';
position: absolute;
top: -50px; left: -10px;
width: 290px; height: 226px;
box-sizing: border-box;
border-radius: 0 20px 0 0;
border-left: 10px solid #0A0615;
border-top: 10px solid #0A0615;
border-bottom: 10px solid #0A0615;
}
.scene-3 .car > div:nth-child(2) {
position: absolute;
top: 41px; left: 516px;
width: 64px; height: 253px;
box-sizing: border-box;
border-right: 10px solid #0A0615;
border-bottom: 10px solid #0A0615;
border-radius: 0 28px 42px 0;
transform-origin: top right;
transform: rotate(-37deg);
z-index: 1;
}
.scene-3 .car > div:nth-child(2):before {
content: '';
position: absolute;
top: 212px; left: -84px;
width: 100px; height: 10px;
background: #0A0615;
transform: rotate(37deg);
}
.scene-3 .car > div:nth-child(2):after {
content: '';
position: absolute;
top: -259px; left: -441px;
width: 213px; height: 227px;
box-sizing: border-box;
border-top: 10px solid #0A0615;
border-right: 10px solid #0A0615;
border-bottom: 10px solid #0A0615;
border-radius: 20px 0 0 0;
transform: rotate(37deg);
}
.scene-3 .car > div:nth-child(3) {
position: absolute;
top: 268px; left: 0px;
width: 80px; height: 10px;
background: #0A0615;
}
.scene-3 .car > div:nth-child(3):before {
content: '';
position: absolute;
top: -185px; left: 70px;
width: 64px; height: 253px;
box-sizing: border-box;
border-left: 10px solid #0A0615;
border-bottom: 10px solid #0A0615;
border-radius: 28px 0 0 42px;
transform-origin: top right;
transform: rotate(37deg);
z-index: 1;
}
.scene-3 .car > div:nth-child(3):after {
content: '';
position: absolute;
top: -60px; left: 100px;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
border-bottom: 52px solid #0A0615;
}
.scene-3 .car > div:nth-child(4) {
position: absolute;
top: 137px; left: 90px;
width: 12px; height: 74px;
background: #0A0615;
border-radius: 6px;
box-shadow: -42px -11px 0 0 #0A0615,
-29px 17px 0 1px #0A0615,
-14px 18px 0 2px #0A0615,
-51px 40px 0 2px #0A0615;
}
.scene-3 .car > div:nth-child(4):before {
content: '';
position: absolute;
top: 79px; left: -32px;
width: 32px; height: 20px;
background: #0A0615;
}
.scene-3 .car > div:nth-child(4):after {
content: '';
position: absolute;
top: 60px; left: -11px;
width: 20px; height: 25px;
background: #0A0615;
border-radius: 6px;
transform: rotate(30deg);
}
.scene-3 .car > div:nth-child(5) {
position: absolute;
top: 29px; left: 54px;
width: 569px; height: 23px;
box-sizing: border-box;
border-top: 10px solid #0A0615;
background: #1B172C;
border-radius: 7% 7% 0 0 / 100% 100% 0 0;
}
.scene-3 .car > div:nth-child(5):before {
content: '';
position: absolute;
top: -7px; left: 7px;
width: 35px; height: 273px;
box-sizing: border-box;
background: #1B172C;
transform-origin: 0 0;
transform: rotate(37deg);
border-radius: 21% 0 0 0;
border-left: 14px solid #425273;
z-index: 3;
}
.scene-3 .car > div:nth-child(5):after {
content: '';
position: absolute;
top: 13px; left: 226px;
width: 28px; height: 227px;
background: #1B172C;
}
.scene-3 .car > div:nth-child(6) {
position: absolute;
top: 30px; left: 599px;
width: 26px; height: 26px;
background: #0A0615;
border-radius: 0 40px 0 0;
transform: skewX(37deg);
}
.scene-3 .car > div:nth-child(6):before {
content: '';
position: absolute;
top: 26px; left: 16px;
width: 10px; height: 218px;
background: #526B94;
box-shadow: -10px 0 0 0 #425273,
-16px 0 0 0 #425273,
-26px 0 0 0 #1B172C,
-34px 0 0 0 #1B172C;
}
.scene-3 .car > div:nth-child(6):after {
content: '';
position: absolute;
top: 22px; left: -25px;
width: 25px; height: 25px;
background: #1B172C;
}
.scene-3 .car > div:nth-child(7) {
position: absolute;
top: 278px; left: 0px;
width: 780px; height: 290px;
background: #1B172C;
}
.scene-3 .car > div:nth-child(7):before {
content: '';
position: absolute;
top: -64px; right: 20px;
border-right: 50px solid transparent;
border-bottom: 64px solid #1B172C;
}
.scene-3 .car > div:nth-child(7):after {
content: '';
position: absolute;
top: -26px; right: 68px;
border-left: 30px solid transparent;
border-bottom: 26px solid #1B172C;
}
.scene-3 .car > div:nth-child(8) {
position: absolute;
top: 136px; left: 182px;
width: 68px; height: 180px;
background: #425464;
border-radius: 60px;
box-shadow: inset 25px -4px 0 9px #2F294A,
inset 35px -10px 0 17px #313152;
z-index: 1;
}
.scene-3 .car > div:nth-child(8):before {
content: '';
position: absolute;
top: 154px; left: 1px;
width: 71px; height: 219px;
background: #425464;
border-radius: 0 0 0 60px;
box-shadow: inset 24px -9px 0 9px #2F294A,
inset 54px 0 0 0 #313152;
transform: rotate(-19.5deg);
transform-origin: 0 0;
}
.scene-3 .car > div:nth-child(8):after {
content: '';
position: absolute;
top: 263px; left: 65px;
width: 232px; height: 80px;
background: #2F294A;
border-radius: 60px 30px 30px 60px;
}
.scene-3 .car > div:nth-child(9) {
position: absolute;
top: 333px; left: 664px;
width: 113px; height: 85px;
box-sizing: border-box;
background: #0A0615;
border: 10px solid #2B242C;
border-radius: 0 60px 60px 60px;
box-shadow: 40px 0 0 10px #2B242C,
37px 78px 0 4px #2B242C,
47px 158px 0 4px #2B242C;
}
.scene-3 .car > div:nth-child(9):before {
content: '';
position: absolute;
top: -57px; left: -11px;
width: 97px; height: 47px;
box-sizing: border-box;
background: #0A0615;
border-radius: 0 0 20px 0;
border-top: 13px solid #2B242C;
border-left: 22px solid #2B242C;
border-right: 10px solid #2B242C;
transform: skewX(-49deg);
transform-origin: bottom left;
box-shadow: 70px 0 0 #2B242C;
}
.scene-3 .car > div:nth-child(9):after {
content: '';
position: absolute;
top: 77px; left: 73px;
width: 80px; height: 131px;
background: #0A0615;
border-radius: 70px 0 0 0;
border-top: 19px solid #1B172C;
border-left: 19px solid #1B172C;
}
.scene-3 .car > div:nth-child(10) {
position: absolute;
top: 414px; left: 498px;
width: 234px; height: 144px;
background: #1B172C;
border-radius: 0 56px 71px 60px;
overflow: hidden;
z-index: 1;
}
.scene-3 .car > div:nth-child(10):before {
content: '';
position: absolute;
top: 16px; left: 2px;
width: 94px; height: 139px;
box-sizing: border-box;
background: #293253;
border-radius: 27px 27px;
box-shadow: inset 0 10px 0 12px #293253,
inset 0 -9px 0 12px #293253,
inset 0 48px 0 20px #424A6B,
inset 0 -17px 0 12px #424A6B,
inset 0 80px 0 0 #202132;
}
.scene-3 .car > div:nth-child(10):after {
content: '';
position: absolute;
top: 0px; left: 32px;
width: 26px; height: 8px;
border-left: 6px solid #3F4262;
border-top: 8px solid #3F4262;
border-right: 6px solid #3F4262;
border-radius: 6px 6px 0 0;
}
.scene-3 .car > div:nth-child(10) > div {
position: absolute;
top: 72px; left: 102px;
width: 84px; height: 12px;
background: #424A6B;
box-shadow: 14px 0 0 0 #424A6B,
34px 0 0 0 #293253,
-18px 12px 0 0 #313152,
-18px 16px 0 0 #313152,
11px 12px 0 0 #313152,
11px 16px 0 0 #313152,
16px 28px 0 0 #293253,
16px 34px 0 0 #293253,
26px 28px 0 0 #293253,
26px 34px 0 0 #293253,
8px 46px 0 0 #432747,
8px 50px 0 0 #432747;
}
.scene-3 .car > div:nth-child(10) > div:before {
content: '';
position: absolute;
top: 16px; left: 4px;
width: 30px; height: 6px;
background: #202132;
box-shadow: 34px 0 0 0 #202132,
38px 0 0 0 #202132,
34px 18px 0 0 #202132,
54px 18px 0 0 #202132,
28px 34px 0 0 #202132,
28px 36px 0 0 #202132,
34px 34px 0 0 #202132,
34px 36px 0 0 #202132;
}
.scene-3 .car > div:nth-child(10) > div:after {
content: '';
position: absolute;
top: 26px; left: 10px;
width: 6px; height: 16px;
background: #202132;
box-shadow: 0 4px 0 0 #202132,
15px 4px 0 0 #202132,
15px 0 0 0 #202132,
85px 4px 0 0 #202132,
85px 0 0 0 #202132,
6px 20px 0 0 #202132,
9px 20px 0 0 #202132,
66px 20px 0 0 #202132,
69px 20px 0 0 #202132;
}
.scene-3 .car > div:nth-child(11) {
position: absolute;
top: 329px; left: 660px;
width: 74px; height: 6px;
background: #0A0615;
transform-origin: 0 0;
transform: rotate(-41deg);
border-radius: 4px;
}
.scene-3 .car > div:nth-child(11):before {
content: '';
position: absolute;
top: -10px; left: 20px;
width: 10px; height: 11px;
background: #0A0615;
}
.scene-3 .car > div:nth-child(11):after {
content: '';
position: absolute;
top: -37px; left: -18px;
width: 85px; height: 27px;
background: #0A0615;
border-radius: 10px 10px 20px 20px;
}
.scene-3 .car > div:nth-child(12) {
position: absolute;
top: 392px; left: 691px;
width: 61px; height: 16px;
background: #293253;
border-radius: 2px 2px 20px 20px;
}
.scene-3 .car > div:nth-child(12):before {
content: '';
position: absolute;
top: -28px; left: -12px;
width: 86px; height: 28px;
box-sizing: border-box;
background: #313152;
border-radius: 0 14px 14px 0;
border-top: 5px solid #522959;
border-right: 5px solid #522959;
border-bottom: 5px solid #522959;
box-shadow: inset 5px 0 0 0 #0A0615,
inset -44px 0 0 -36px #1B172C;
}
.scene-3 .car > div:nth-child(12):after {
content: '';
position: absolute;
top: -68px; left: 11px;
width: 44px; height: 10px;
background: #293253;
border-radius: 5px;
box-shadow: 10px -10px 0 0 #293253;
}
.scene-3 .car > div:nth-child(13) {
position: absolute;
top: 272px; left: 750px;
width: 60px; height: 14px;
background: #0A0615;
transform: skewX(37deg);
}
.scene-3 .car > div:nth-child(13):before {
content: '';
position: absolute;
top: -113px; left: 68px;
width: 9px; height: 113px;
background: #0A0615;
box-shadow: -15px -55px 0 0 #0A0615,
-15px 0px 0 0 #0A0615;
}
.scene-3 .car > div:nth-child(13):after {
content: '';
position: absolute;
top: -102px; left: 53px;
width: 16px; height: 14px;
background: #0A0615;
}
.scene-3 .car > div:nth-child(14) {
position: absolute;
top: 496px; left: 323px;
width: 230px; height: 62px;
background: linear-gradient(#0A0615 25%, #2B242C 26%, #2B242C 84%, #1B172C 85%);
border-radius: 56px 0 0 0;
}
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
