div+css实现带小河小屋狗狗的果园效果代码
代码语言：html
所属分类：布局界面
代码描述：div+css实现带小河小屋狗狗的果园效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,body {
width:100%;
height:100%;
background-color:#f9ccca;
transform:translate3d(0,0,0) scale(0.85);
animation:zoom 10s ease forwards
}
@keyframes zoom {
100% {
transform:scale(0.9)
}
}.container {
width:100%;
height:100%;
background-color:#f9ccca;
display:grid;
place-content:center
}
.switch-container {
position:absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%
}
.land {
transform:rotate(-25deg) skew(25deg) scale(0.8);
position:absolute;
border-radius:20px
}
.path {
width:450px;
height:100px;
background-color:#ffe5b9;
top:18px;
left:60px
}
.path:after {
content:"";
position:absolute;
width:50px;
height:50px;
background-color:#ffe5b9;
left:300px;
top:-15px
}
.grass {
width:650px;
height:400px;
left:-100px;
background-color:#94dad0;
top:-40px;
border:1px solid black
}
.grass:before {
content:"";
position:absolute;
border-radius:20px;
background-color:#94dad0;
width:150px;
height:150px;
left:600px;
top:30px;
border:1px solid black
}
.grass:after {
content:"";
position:absolute;
border-radius:20px;
background-color:#94dad0;
width:450px;
height:150px;
left:100px;
top:-50px;
border-top:1px solid black
}
.sand {
background-color:#fff8ec;
width:300px;
height:220px;
bottom:-100px;
left:180px;
box-shadow:inset 10px 1px 20px #ffdca0,-2px 2px #ffd286,inset -10px 1px 20px #ffdca0,2px 2px #ffad20
}
.sand:before,.sand:after {
position:absolute;
content:"";
background-color:#fff8ec
}
.sand:before {
width:150px;
height:80px;
bottom:-50px;
right:0;
border-radius:20px;
box-shadow:inset -10px -12px 20px #ffdca0,-2px 2px #ffd286,inset 5px -12px 20px #ffdca0,-2px 2px #ffad20,2px 2px #ffad20
}
.sand:after {
width:130px;
height:55px;
bottom:4px;
right:22px;
clip-path:polygon(0 0,100% 0,100% 99%,18% 100%,0 90%)
}
.water {
width:350px;
height:150px;
background-color:#2bc0e4;
background-image:linear-gradient(to top,#5b86e5,#83f7ff 70%);
background-size:350px 900px;
box-shadow:inset -5px -5px 30px #00c3e3;
bottom:0;
left:445px;
animation:animateLakeColor 10s infinite;
overflow:hidden
}
.bubbles {
position:absolute;
width:70px;
height:20px;
left:630px;
top:335px;
transform:rotate(-30deg)
}
.bubbles .bubble {
position:absolute;
display:inline-block;
background-color:white;
border-radius:100%;
width:100%
}
.bubbles .bubble:nth-child(1) {
width:44px;
height:44px;
left:-5px;
animation:scaleBubble 1s .2s linear infinite
}
.bubbles .bubble:nth-child(2) {
width:46px;
height:46px;
left:0;
animation:scaleBubble 2s .2s linear infinite
}
.bubbles .bubble:nth-child(3) {
width:39px;
height:39px;
left:5px;
animation:scaleBubble 2s .2s linear infinite
}
.bubbles .bubble:nth-child(4) {
width:30px;
height:30px;
left:10px;
animation:scaleBubble 3s .2s linear infinite
}
.bubbles .bubble:nth-child(5) {
width:46px;
height:46px;
left:15px;
animation:scaleBubble 3s .2s linear infinite
}
.bubbles .bubble:nth-child(6) {
width:39px;
height:39px;
left:20px;
animation:scaleBubble 3s .2s linear infinite
}
.bubbles .bubble:nth-child(7) {
width:32px;
height:32px;
left:25px;
animation:scaleBubble 2s 1.2s linear infinite
}
.bubbles .bubble:nth-child(8) {
width:40px;
height:40px;
left:30px;
animation:scaleBubble 1s 1.2s linear infinite
}
.bubbles .bubble:nth-child(9) {
width:26px;
height:26px;
left:35px;
animation:scaleBubble 3s .2s linear infinite
}
.bubbles .bubble:nth-child(10) {
width:50px;
height:50px;
left:40px;
animation:scaleBubble 1s 1.2s linear infinite
}
@keyframes scaleBubble {
50% {
transform:scale(0.5)
}
}@keyframes animateLakeColor {
50% {
background-position-y:-200px
}
}.switch-base {
position:relative;
width:680px;
height:300px;
background-color:#1d1d1d;
border-radius:30px;
top:30px;
transform:rotate(-25deg) skew(25deg) scale(0.8);
display:grid;
grid-template-columns:1fr 5fr 1fr;
overflow:hidden
}
.switch-base .joycon-shadow-blue {
width:100%;
height:100%;
background-color:#0097b0
}
.switch-base .joycon-shadow-red {
width:100%;
height:100%;
background-color:#ff1225
}
.joycon-blue-base {
position:absolute;
width:20px;
height:30px;
background-color:#0097b0;
left:4px;
top:185px
}
.joycon-blue-base:after {
content:"";
position:absolute;
width:25px;
height:33px;
background-color:#0097b0;
left:236px;
top:130px;
z-index:1
}
.black-base {
position:absolute;
width:30px;
height:33px;
background-color:#1d1d1d;
left:587px;
top:150px;
z-index:1
}
.black-base:after {
position:absolute;
content:"";
width:50px;
height:55px;
background-color:#83f7ff;
right:17px;
top:10px
}
.joycon-red-base {
position:absolute;
width:20px;
height:30px;
background-color:#ff1225;
left:656px;
top:120px;
z-index:1
}
.switch {
position:absolute;
width:680px;
height:300px;
background-color:#373737;
border-radius:30px;
display:grid;
grid-template-columns:1fr 5fr 1fr;
overflow:hidden;
transform:rotate(-25deg) skew(25deg) scale(0.8);
z-index:2
}
.switch .joycon {
height:100%
}
.switch .joycon .joystick {
position:relative;
width:50px;
height:50px;
left:calc(50% - 25px);
background-color:#414548;
background-image:radial-gradient(25px 25px at 55% center,#414548 30%,#1d1d1d),radial-gradient(20px 20px at 20% 50%,#1d1d1d,transparent);
border-radius:100%
}
.switch .joycon .buttons {
position:relative;
width:70px;
height:70px;
left:calc(50% - 35px);
background-image:radial-gradient(12px 12px at 50% 20%,#414548 10%,#1d1d1d 95%,99%,transparent),radial-gradient(12px 12px at 20% 50%,#414548 10%,#1d1d1d 95%,99%,transparent),radial-gradient(12px 12px at 80% 50%,#414548 10%,#1d1d1d 95%,99%,transparent),radial-gradient(12px 12px at 50% 80%,#414548 10%,#1d1d1d 95%,99%,transparent)
}
.switch .joycon.red {
background-color:#ff4554
}
.switch .joycon.red .plus {
position:relative;
width:7px;
height:18px;
background-color:#1d1d1d;
left:20%;
top:20px
}
.switch .joycon.red .plus:after {
content:"";
position:absolute;
width:100%;
height:100%;
background-color:#1d1d1d;
transform-origin:center;
transform:rotate(90deg)
}
.switch .joycon.red .joystick {
top:80px
}
.switch .joycon.red .buttons {
top:30px
}
.switch .joycon.red .home-button {
position:relative;
width:22px;
height:22px;
background-color:#575757;
background-image:radial-gradient(12px 12px at center,#414548 60%,#1d1d1d 62%,transparent);
border-radius:100%;
border:1px solid #1d1d1d;
left:15%;
top:110px
}
.switch .joycon.blue {
background-color:#00c3e3
}
.switch .joycon.blue .joystick {
top:-20px
}
.switch .joycon.blue .buttons {
top:50%
}
.switch .joycon.blue .minus {
position:relative;
width:20px;
height:10px;
background-color:#1d1d1d;
left:60%;
top:20px;
border-radius:5px
}
.switch .joycon.blue .capture-button {
position:relative;
width:15px;
height:15px;
background-color:#414548;
background-image:radial-gradient(6px 6px at center,#414548 70%,#1d1d1d 99%,transparent);
border:2px solid #1d1d1d;
border-radius:3px;
left:65%;
top:120px
}
.switch .screen {
box-sizing:border-box;
width:100%;
height:100%;
border:30px solid #2a2a2a;
background-color:#35bb87;
background-color:#61d4c5;
background-color:#94dad0
}
.switch .screen .river {
position:relative;
background-color:#2bc0e4;
background-image:linear-gradient(to bottom,#5b86e5,#83f7ff 70%);
width:70px;
height:130%;
top:-30px;
left:85%;
background-size:300px 400px;
animation:animateWaterColor 10s infinite;
box-shadow:-10px 0 20px #379e8f
}
.switch .screen .river .flow-container {
width:100%;
height:100%;
position:absolute;
display:flex;
justify-content:space-evenly
}
.switch .screen .river .flow-container .flow {
flex:1 1 0;
width:10px;
background-color:rgba(255,255,255,0.4);
border-radius:100px;
transform:translateY(-100px);
height:20px
}
.switch .screen .river .flow-container .flow:nth-child(0) {
animation:flow 5s 0s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(1) {
animation:flow 2s .1s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(2) {
animation:flow 2s .2s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(3) {
animation:flow 4s .3s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(4) {
animation:flow 3s .4s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(5) {
animation:flow 3s .5s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(6) {
animation:flow 3s .6s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(7) {
animation:flow 5s .7s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(8) {
animation:flow 4s .8s linear infinite
}
.switch .screen .river .flow-container .flow:nth-child(9) {
animation:flow 2s .9s linear infinite
}
@keyframes flow {
100% {
transform:translateY(700px)
}
}.switch .screen .river .river-row {
position:absolute;
width:100%;
height:40px;
display:flex;
justify-content:center;
align-items:center
}
.switch .screen .river .river-row .streak {
flex:1 1 1px;
background-color:white;
border-radius:100px;
height:100%;
width:auto
}
.switch .screen .river .river-row:nth-child(1) {
top:60px
}
.switch .screen .river .river-row:nth-child(1)>.streak:nth-child(1) {
animation:streak 3s 0s linear infinite
}
.switch .screen .river .river-row:nth-child(1)>.streak:nth-child(2) {
animation:streak 2s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(1)>.streak:nth-child(3) {
animation:streak 3s 0s linear infinite
}
.switch .screen .river .river-row:nth-child(1)>.streak:nth-child(4) {
animation:streak 2s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(1)>.streak:nth-child(5) {
animation:streak 1s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(1)>.streak:nth-child(6) {
animation:streak 2s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(1)>.streak:nth-child(7) {
animation:streak 1s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(2) {
top:200px
}
.switch .screen .river .river-row:nth-child(2)>.streak:nth-child(1) {
animation:streak 3s 0s linear infinite
}
.switch .screen .river .river-row:nth-child(2)>.streak:nth-child(2) {
animation:streak 3s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(2)>.streak:nth-child(3) {
animation:streak 3s 0s linear infinite
}
.switch .screen .river .river-row:nth-child(2)>.streak:nth-child(4) {
animation:streak 2s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(2)>.streak:nth-child(5) {
animation:streak 1s 0s linear infinite
}
.switch .screen .river .river-row:nth-child(2)>.streak:nth-child(6) {
animation:streak 2s 1s linear infinite
}
.switch .screen .river .river-row:nth-child(2)>.streak:nth-child(7) {
animation:streak 1s 0s linear infinite
}
@keyframes streak {
50% {
transform:scaleY(0.3)
}
}@keyframes animateWaterColor {
50% {
background-position-y:-100px
}
}.switch .screen .grass-sand {
position:absolute;
width:300px;
height:100px;
background-color:#fff8ec;
top:170px;
border-top-right-radius:30px;
box-shadow:inset 10px 1px 20px #ffdca0,-2px 2px #ffd286,inset -10px 1px 20px #ffdca0,2px 1px #ffad20
}
.switch .screen .blanket {
position:absolute;
width:240px;
height:140px;
border-radius:30px;
top:100px;
left:150px;
border:4px solid #c9959d;
background-image:radial-gradient(white 3px,transparent 4px),radial-gradient(white 3px,transparent 4px),linear-gradient(pink 4px,transparent 0),linear-gradient(45deg,transparent 74px,transparent 75px,#ececec 75px,#ececec 76px,transparent 77px,transparent 109px),linear-gradient(-45deg,transparent 75px,transparent 76px,#ececec 76px,#ececec 77px,transparent 78px,transparent 109px);
background-color:pink;
background-size:109px 109px,109px 109px,100% 6px,109px 109px,109px 109px;
background-position:54px 55px,0px 0,0px 0
}
.scene-overlay {
position:absolute;
width:850px;
height:600px;
z-index:2;
transform:translate(-50%,-50%);
top:50%;
left:50%
}
.trees {
position:absolute;
width:80%;
height:150px;
transform-origin:center;
top:130px;
left:-50px;
transform:rotate(-25deg)
}
.trees .tree {
position:absolute;
width:60px;
height:100%;
transform:rotate(25deg) scale(1.1);
left:100px
}
.trees .tree .trunk {
width:58%;
height:30%;
background-color:#df916a;
border-left:.09em solid black;
border-right:.09em solid black;
box-shadow:inset 0 30px 10px #a64f24
}
.trees .tree .trunk:after {
content:"";
position:absolute;
width:60px;
height:28px;
background-color:rgba(0,0,0,0.2);
top:40px;
z-index:-2;
right:15px;
border-radius:100%
}
.trees .tree .trunk .roots {
position:relative;
z-index:-1;
top:95%;
display:flex;
justify-content:center;
align-items:center;
width:110%;
height:auto;
left:-5%
}
.trees .tree .trunk .roots .root {
flex:1 1 0;
background-color:#dd8b62;
height:15px;
margin:0 -1px;
border-radius:10px
}
.trees .tree .trunk .roots .root:nth-child(1) {
transform:rotate(30deg)
}
.trees .tree .trunk .roots .root:nth-child(2) {
transform:rotate(15deg)
}
.trees .tree .trunk .roots .root:nth-child(3) {
transform:rotate(0deg)
}
.trees .tree .trunk .roots .root:nth-child(4) {
transform:rotate(-15deg)
}
.trees .tree .trunk .roots .root:nth-child(5) {
transform:rotate(-30deg)
}
.trees .tree .trunk .roots .root:first-child {
box-shadow:-1px 1px #d0632d,-0.1em 1px black
}
.trees .tree .trunk .roots .root:nth-child(n+2):nth-child(-n+4) {
box-shadow:0 1px #d0632d,0em 1px black
}
.trees .tree .trunk .roots .root:last-child {
box-shadow:1px 1px #d0632d,0.1em 1px black
}
.trees .tree .leaves,.trees .tree .cherry-blossoms {
position:relative;
width:60px;
height:60px;
top:-120px;
left:-12px;
background-color:#4cbda4;
border-radius:100%;
box-shadow:inset 4px -10px #41af97;
border:1px solid #3a9c87;
border:.1em solid black
}
.trees .tree .leaves:before,.trees .tree .cherry-blossoms:before,.trees .tree .leaves:after,.trees .tree .cherry-blossoms:after {
content:"";
position:absolute;
width:60px;
height:60px;
background-color:#4cbda4;
border-radius:100%;
top:35px;
border:1px solid #3a9c87;
border:.1em solid black;
border-top:0;
border-bottom:2px solid #91451f;
box-shadow:inset 4px -10px #41af97
}
.trees .tree .leaves:before,.trees .tree .cherry-blossoms:before {
left:-20px
}
.trees .tree .leaves:after,.trees .tree .cherry-blossoms:after {
left:20px
}
.trees .tree .leaves .leaf,.trees .tree .cherry-blossoms .leaf {
position:absolute;
width:10px;
height:15px;
background-color:#4cbda4;
background-image:linear-gradient(to bottom,#097465,transparent);
border-radius:10% 80%;
border-bottom:1px solid #2c7766;
border-right:1px solid #2c7766;
transform:scale(0.5)
}
.trees .tree .leaves .leaf:before,.trees .tree .cherry-blossoms .leaf:before,.trees .tree .leaves .leaf:after,.trees .tree .cherry-blossoms .leaf:after {
content:"";
position:absolute;
background-color:#4cbda4;
background-image:linear-gradient(to bottom,#008b79,transparent);
width:7px;
height:12px;
border-radius:10% 80%;
border-right:1px solid #338a76
}
.trees .tree .leaves .leaf:before,.trees .tree .cherry-blossoms .leaf:before {
left:-3px;
transform:rotate(40deg);
border-left:1px solid #338a76
}
.trees .tree .leaves .leaf:after,.trees .tree .cherry-blossoms .leaf:after {
left:4px;
top:-2px;
transform:rotate(-40deg);
border-bottom:1px solid #338a76
}
.trees .tree .leaves .leaf:nth-child(1),.trees .tree .cherry-blossoms .leaf:nth-child(1) {
top:85px;
transform:scale(0.8) rotate(-25deg)
}
.trees .tree .leaves .leaf:nth-child(2),.trees .tree .cherry-blossoms .leaf:nth-child(2) {
top:80px;
left:-15px
}
.trees .tree .leaves .leaf:nth-child(3),.trees .tree .cherry-blossoms .leaf:nth-child(3) {
top:85px;
left:15px;
transform:scale(1.1) rotate(-25deg)
}
.trees .tree .leaves .leaf:nth-child(4),.trees .tree .cherry-blossoms .leaf:nth-child(4) {
top:80px;
left:25px;
z-index:3
}
.trees .tree .leaves .leaf:nth-child(5),.trees .tree .cherry-blossoms .leaf:nth-child(5) {
top:85px;
left:60px;
z-index:2;
transform:scale(0.9) rotate(70deg)
}
.trees .tree .leaves .leaf:nth-child(6),.trees .tree .cherry-blossoms .leaf:nth-child(6) {
top:80px;
left:45px;
z-index:2;
transform:scale(1.2) rotate(50deg)
}
.trees .tree .leaves .leaf:nth-child(7),.trees .tree .cherry-blossoms .leaf:nth-child(7) {
top:72px;
left:-20px
}
.trees .tree .leaves .leaf:nth-child(8),.trees .tree .cherry-blossoms .leaf:nth-child(8) {
top:75px;
left:-1px;
transform:scale(1.02) rotate(-25deg)
}
.trees .tree .leaves .leaf:nth-child(9),.trees .tree .cherry-blossoms .leaf:nth-child(9) {
top:70px;
left:10px
}
.trees .tree .leaves .leaf:nth-child(10),.trees .tree .cherry-blossoms .leaf:nth-child(10) {
top:55px;
left:-20px;
transform:scale(1.5) rotate(18deg)
}
.trees .tree .leaves .leaf:nth-child(11),.trees .tree .cherry-blossoms .leaf:nth-child(11) {
top:60px;
transform:scale(0.9);
left:-5px
}
.trees .tree .leaves .leaf:nth-child(12),.trees .tree .cherry-blossoms .leaf:nth-child(12) {
z-index:2;
left:28px;
top:60px
}
.trees .tree .leaves .leaf:nth-child(13),.trees .tree .cherry-blossoms .leaf:nth-child(13) {
z-index:2;
left:40px;
top:70px;
transform:rotate(40deg)
}
.trees .tree .leaves .leaf:nth-child(14),.trees .tree .cherry-blossoms .leaf:nth-child(14) {
z-index:2;
left:55px;
top:70px;
transform:rotate(60deg) scale(1.3)
}
.trees .tree .leaves .leaf:nth-child(15),.trees .tree .cherry-blossoms .leaf:nth-child(15) {
z-index:2;
left:25px;
top:70px;
transform:rotate(-20deg) scale(1.1)
}
.trees .tree .leaves .leaf:nth-child(16),.trees .tree .cherry-blossoms .leaf:nth-child(16) {
z-index:2;
left:70px;
top:70px;
transform:rotate(50deg) scale(0.7)
}
.trees .tree .leaves .leaf:nth-child(17),.trees .tree .cherry-blossoms .leaf:nth-child(17) {
z-index:2;
left:70px;
top:60px;
transform:scale(0.6) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(18),.trees .tree .cherry-blossoms .leaf:nth-child(18) {
z-index:2;
left:50px;
top:60px;
transform:scale(0.7) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(19),.trees .tree .cherry-blossoms .leaf:nth-child(19) {
z-index:2;
left:65px;
top:48px;
transform:scale(1.5) rotate(50deg)
}
.trees .tree .leaves .leaf:nth-child(20),.trees .tree .cherry-blossoms .leaf:nth-child(20) {
z-index:2;
left:40px;
top:50px;
transform:scale(0.8) rotate(70deg)
}
.trees .tree .leaves .leaf:nth-child(21),.trees .tree .cherry-blossoms .leaf:nth-child(21) {
z-index:2;
left:58px;
top:35px;
transform:scale(0.7) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(22),.trees .tree .cherry-blossoms .leaf:nth-child(22) {
z-index:2;
left:20px;
top:55px;
transform:scale(1) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(23),.trees .tree .cherry-blossoms .leaf:nth-child(23) {
z-index:2;
left:40px;
top:60px;
transform:scale(0.4) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(24),.trees .tree .cherry-blossoms .leaf:nth-child(24) {
z-index:2;
left:10px;
top:60px;
transform:scale(0.6) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(25),.trees .tree .cherry-blossoms .leaf:nth-child(25) {
left:-12px;
top:38px;
transform:scale(1) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(26),.trees .tree .cherry-blossoms .leaf:nth-child(26) {
left:-5px;
top:45px;
transform:scale(0.8) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(27),.trees .tree .cherry-blossoms .leaf:nth-child(27) {
left:8px;
top:52px;
transform:scale(1) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(28),.trees .tree .cherry-blossoms .leaf:nth-child(28) {
z-index:2;
left:50px;
top:52px;
transform:scale(1) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(29),.trees .tree .cherry-blossoms .leaf:nth-child(29) {
left:48px;
top:10px;
transform:scale(1) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(30),.trees .tree .cherry-blossoms .leaf:nth-child(30) {
left:30px;
top:-5px;
transform:scale(0.8) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(31),.trees .tree .cherry-blossoms .leaf:nth-child(31) {
left:20px;
top:-5px;
transform:scale(0.5) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(32),.trees .tree .cherry-blossoms .leaf:nth-child(32) {
left:40px;
top:-3px;
transform:scale(0.5) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(33),.trees .tree .cherry-blossoms .leaf:nth-child(33) {
left:10px;
top:10px;
transform:scale(0.7) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(34),.trees .tree .cherry-blossoms .leaf:nth-child(34) {
left:0;
top:25px;
transform:scale(1) rotate(-10deg)
}
.trees .tree .leaves .leaf:nth-child(35),.trees .tree .cherry-blossoms .leaf:nth-child(35) {
left:20px;
top:30px;
transform:scale(1.2) rotate(0deg)
}
.trees .tree .leaves .leaf:nth-child(36),.trees .tree .cherry-blossoms .leaf:nth-child(36) {
left:50px;
top:30px;
transform:scale(1.2) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(37),.trees .tree .cherry-blossoms .leaf:nth-child(37) {
left:50px;
top:30px;
transform:scale(1.2) rotate(60deg)
}
.trees .tree .leaves .leaf:nth-child(38),.trees .tree .cherry-blossoms .leaf:nth-child(38) {
left:50px;
top:20px;
transform:scale(1) rotate(40deg)
}
.trees .tree .leaves .leaf:nth-child(39),.trees .tree .cherry-blossoms .leaf:nth-child(39) {
left:40px;
top:23px;
transform:scale(0.8) rotate(50deg)
}
.trees .tree .leaves .leaf:nth-child(40),.trees .tree .cherry-blossoms .leaf:nth-child(40) {
left:30px;
top:20px;
transform:scale(0.5) rotate(-20deg)
}
.trees .tree .leaves .leaf:nth-child(40),.trees .tree .cherry-blossoms .leaf:nth-child(40) {
left:30px;
top:10px;
transform:scale(1.5) rotate(-20deg)
}
.trees .tree .leaves .leaf:nth-child(41),.trees .tree .cherry-blossoms .leaf:nth-child(41) {
left:1px;
top:15px;
transform:scale(0.9) rotate(-5deg)
}
.trees .tree .leaves .leaf:nth-child(42),.trees .tree .cherry-blossoms .leaf:nth-child(42) {
left:10px;
top:18px;
transform:scale(0.5) rotate(5deg)
}
.trees .tree .leaves .leaf:nth-child(44),.trees .tree .cherry-blossoms .leaf:nth-child(44) {
left:5px;
top:35px;
transform:scale(1.5) rotate(-5deg)
}
.trees .tree .leaves .leaf:nth-child(45),.trees .tree .cherry-blossoms .leaf:nth-child(45) {
z-index:2;
left:38px;
top:35px;
transform:scale(1.8) rotate(70deg)
}
.trees .tree .leaves .leaf:nth-child(46),.trees .tree .cherry-blossoms .leaf:nth-child(46) {
left:10px;
top:5px;
transform:scale(1.3) rotate(70deg)
}
.trees .tree .cherry-blossoms {
background-color:#ffd9df;
border:.05em solid black;
box-shadow:none
}
.trees .tree .cherry-blossoms:before,.trees .tree .cherry-blossoms:after {
background-color:#ffd9df;
border:.05em solid black;
border-top:0;
box-shadow:none
}
.trees .tree .cherry-blossoms:after {
border-left:none
}
.trees .tree .cherry-blossoms .cherry-blossom {
position:absolute;
width:20px;
height:20px
}
.trees .tree .cherry-blossoms .cherry-blossom .petal {
position:absolute;
width:10px;
height:10px;
background-color:#ffd9df;
background-image:linear-gradient(-45deg,#ec87bf 10%,#ffd9df 65%);
border-radius:20% 80%;
box-shadow:-0.04em -0.04em #ec87bf,-0.05em -0.05em black
}
.trees .tree .cherry-blossoms .cherry-blossom .petal:nth-child(1) {
transform:rotate(40deg);
left:25%;
top:2px
}
.trees .tree .cherry-blossoms .cherry-blossom .petal:nth-child(2) {
transform:rotate(-20deg);
top:6px;
left:0
}
.trees .tree .cherry-blossoms .cherry-blossom .petal:nth-child(3) {
transform:rotate(-90deg);
top:12px;
left:2px
}
.trees .tree .cherry-blossoms .cherry-blossom .petal:nth-child(4) {
transform:rotate(180deg);
top:12px;
left:10px
}
.trees .tree .cherry-blossoms .cherry-blossom .petal:nth-child(5) {
transform:rotate(100deg);
top:5px;
left:10px
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(1) {
z-index:2;
left:30px;
transform:rotate(10deg) scale(0.8);
top:70px
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(2) {
z-index:2;
left:50px;
transform:rotate(20deg) scale(0.4);
top:65px
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(3) {
z-index:2;
left:45px;
top:75px;
transform:scale(0.6)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(4) {
z-index:2;
left:45px;
top:50px;
transform:scale(1)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(5) {
z-index:2;
left:58px;
top:70px;
transform:scale(0.5)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(6) {
z-index:2;
left:62px;
top:55px;
transform:scale(0.5)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(7) {
z-index:2;
left:55px;
top:35px;
transform:scale(0.8)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(8) {
z-index:2;
left:30px;
top:55px;
transform:scale(0.5)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(9) {
z-index:2;
left:30px;
top:30px;
transform:scale(1.1)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(10) {
z-index:2;
left:15px;
top:50px;
transform:scale(0.9)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(11) {
z-index:2;
left:-7px;
top:40px;
transform:scale(1.1)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(12) {
left:6px;
top:60px;
transform:scale(0.8)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(13) {
left:10px;
top:75px;
transform:scale(0.5)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(14) {
left:0;
top:75px;
transform:scale(0.8)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(15) {
left:-15px;
top:65px;
transform:scale(0.7)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(16) {
left:-22px;
top:55px;
transform:scale(0.5)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(17) {
left:5px;
top:18px;
transform:scale(1.2) rotate(-40deg)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(18) {
left:30px;
top:10px;
transform:scale(1)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(19) {
left:45px;
top:18px;
transform:scale(0.5)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(20) {
left:12px;
top:38px;
transform:scale(0.5)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(21) {
left:12px;
top:0;
transform:scale(0.7) rotate(60deg)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(22) {
left:25px;
top:-2px;
transform:scale(0.4) rotate(60deg)
}
.trees .tree .cherry-blossoms .cherry-blossom:nth-child(23) {
left:-20px;
top:45px;
transform:scale(0.4) rotate(60deg)
}
.trees .tree .fruits {
position:absolute;
width:100px;
height:100px;
top:-50%;
left:-50%;
z-index:2
}
.trees .tree .fruits .pear {
position:absolute;
width:13px;
height:15px;
background-color:#ffef94;
border-radius:100%;
box-shadow:inset 2px 0 #fad500;
border:.003em solid black
}
.trees .tree .fruits .pear:before,.trees .tree .fruits .pear:after {
content:"";
position:absolute
}
.trees .tree .fruits .pear:before {
width:20px;
height:20px;
background-color:#ffef94;
border-radius:100%;
top:6px;
border-right:.003em solid black;
box-shadow:inset 2px -2px #fad500,-0.06em .08em black
}
.trees .tree .fruits .pear:after {
width:5px;
height:8px;
border-left:2px solid #641b1b;
border-radius:100%;
top:-7px;
left:3px
}
.trees .tree .fruits .pear:nth-child(1) {
left:40px;
top:15px;
z-index:3
}
.trees .tree .fruits .pear:nth-child(2) {
left:15px;
top:50px
}
.trees .tree .fruits .pear:nth-child(3) {
left:65px;
top:50px
}
.trees .tree:nth-child(1) {
top:30px;
left:95px
}
.trees .tree:nth-child(3) {
top:-30px;
left:280px
}
.trees .tree:nth-child(2) {
left:550px;
top:25px;
z-index:2
}
.trees .tree:nth-child(5) {
left:80px;
top:-70px;
z-index:-1
}
.trees .tree:nth-child(4) {
left:10px;
top:20px
}
.trees .tree:nth-child(6) {
left:185px;
top:-50px;
z-index:-1
}
.house {
position:absolute;
width:190px;
height:180px;
background-color:white;
border-bottom:10px solid brown;
left:300px;
transform:rotate(-25deg) skew(-26deg) scale(0.55)
}
.house .roof {
position:absolute;
width:100%;
height:65px;
background-color:white;
border-bottom:20px solid brown;
clip-path:polygon(40% 0,0% 100%,100% 100%);
top:-30px;
left:5px
}
.house .roof .decal {
position:absolute;
width:30px;
height:100px;
background-color:brown;
left:calc(50% - 10px);
box-shadow:-4px -4px #7c2020
}
.house .roof .decal:before,.house .roof .decal:after {
content:"";
position:absolute;
background-color:brown;
width:20px;
height:100px
}
.house .roof .decal:before {
transform:rotate(45deg);
left:50px
}
.house .roof .decal:after {
transform:rotate(-45deg);
left:-35px;
height:110px
}
.house .entrance {
position:absolute;
width:60px;
height:100px;
background-color:#ff4554;
left:calc(55% - 30px);
top:80px;
border-top-left-radius:20px;
border-top-right-radius:20px
}
.house .entrance:before,.house .entrance:after {
position:absolute;
content:""
}
.house .entrance:before {
width:100px;
height:120px;
background-color:brown;
z-index:-1;
left:calc(50% - 50px);
top:-20px;
border-top-left-radius:30px;
border-top-right-radius:30px;
box-shadow:-8px -5px #7c2020,-8px 0 #7c2020
}
.house .entrance:after {
width:15px;
height:15px;
background-color:gold;
border-radius:100%;
top:50px;
box-shadow:-3px -2px goldenrod
}
.house .entrance .window {
position:relative;
width:40px;
height:85%;
background-image:linear-gradient(to bottom,#302b63 50%,transparent 50%);
top:15px;
left:calc(50% - 20px);
border-top-left-radius:10px;
border-top-right-radius:10px;
border:1px solid #b92f2f;
overflow:hidden
}
.house .entrance .window:before,.house .entrance .window:after {
content:"";
position:absolute;
background-color:#ff4554
}
.house .entrance .window:before {
width:100%;
height:10px;
top:20px;
box-shadow:0 -3px brown
}
.house .entrance .window:after {
width:10px;
height:50%;
left:calc(50% - 5px);
box-shadow:-3px 0 brown
}
.house .side {
position:absolute;
width:70%;
height:100%;
background-color:#ffeccc;
transform:skewY(45deg) scale(0.9);
left:-126px;
top:-50px;
border-bottom:10px solid #7c2020
}
.house .side .side-window {
position:absolute;
width:80px;
height:80px;
background-color:#1f1c3f;
background-image:linear-gradient(to top,#ad2c2c 5%,transparent 5%);
box-sizing:border-box;
border:15px solid #7c2020;
top:50px;
left:30px;
border-radius:10px;
box-shadow:5px -2px #ad2c2c
}
.house .roof-top {
box-sizing:border-box;
z-index:2;
position:absolute;
width:110%;
height:80%;
background-color:#ff4554;
transform:rotate(45deg) skewX(3deg);
left:-133px;
top:-120px;
border:3px solid #7c2020;
border-radius:10px
}
.right-roof-top {
width:150px;
height:200px;
position:absolute;
background-color:#ff1225;
clip-path:polygon(0 0,50% 10%,100% 30%,51% 19%);
transform:rotate(2deg) scaleY(1.5);
left:317px;
top:18px
}
.right-roof-cleanup {
position:absolute;
width:40px;
height:50px;
background-color:#f9ccca;
left:448px;
top:10px
}
.right-roof-cleanup:after {
content:"";
position:absolute;
width:60px;
height:30px;
background-color:#f9ccca;
transform:rotate(45deg);
left:-30px
}
.right-roof-cleanup:before {
content:"";
position:absolute;
width:20px;
height:50px;
background-color:#ff1225;
top:-42px;
left:-84px;
transform:rotate(-50deg)
}
.right-roof-cleanup .roof-filling {
z-index:-1;
width:33px;
height:30px;
background-color:#ff1225;
position:absolute;
top:-54px;
right:132px;
transform:rotate(35deg);
clip-path:polygon(100% 63%,0 64%,100% 0)
}
.flowers {
position:absolute;
width:60px;
height:60px;
left:190px;
top:160px;
transform:scale(0.75)
}
.flowers:after {
content:"";
position:absolute;
width:60px;
height:35px;
background-color:rgba(0,0,0,0.1);
bottom:0;
z-index:-2;
border-radius:100%;
left:-10px;
bottom:-15px
}
.flowers .flower-leaves {
position:relative;
width:100%;
height:20px;
background-color:#a8e6ba;
border-radius:100% 10%;
top:80%;
left:5px;
box-shadow:-1px 1px black,1px 1px black,1px -1px black
}
.flowers .flower-leaves:before,.flowers .flower-leaves:after {
content:"";
position:absolute;
background-color:#a8e6ba
}
.flowers .flower-leaves:before {
width:60px;
height:20px;
border-radius:100% 10%;
transform:rotate(30deg);
right:10px;
box-shadow:-1px 1px black,1px 1px black,1px -1px black
}
.flowers .flower-leaves:after {
width:50px;
height:20px;
border-radius:100% 10%;
transform:rotate(15deg);
top:2px
}
.flowers .flower {
position:absolute;
width:30px;
height:30px
}
.flowers .flower:after {
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:100%;
left:6px;
top:8px;
background-image:radial-gradient(8px 8px at center,#9379aa 30%,#521c81 41%,60%,transparent)
}
.flowers .flower>.petal {
position:absolute;
width:10px;
height:10px;
background-color:#f8f8ff;
background-image:linear-gradient(45deg,#f8f8ff,#d3cce3);
border-radius:50% 80%;
box-shadow:-0.04em -0.04em purple,-0.05em -0.05em black
}
.flowers .flower>.petal:nth-child(1) {
transform:rotate(40deg);
left:5px;
top:2px
}
.flowers .flower>.petal:nth-child(2) {
transform:rotate(-20deg);
top:6px;
left:0
}
.flowers .flower>.petal:nth-child(3) {
transform:rotate(-90deg);
top:12px;
left:2px
}
.flowers .flower>.petal:nth-child(4) {
transform:rotate(180deg);
top:12px;
left:10px
}
.flowers .flower>.petal:nth-child(5) {
transform:rotate(100deg);
top:5px;
left:10px
}
.flowers .bunch .flower:nth-child(1) {
left:33px;
transform:scale(1.5) rotate(30deg)
}
.flowers .bunch .flower:nth-child(2) {
left:10px;
transform:scale(1.5) rotate(-20deg)
}
.flowers .bunch .flower:nth-child(3) {
left:25px;
top:40px;
transform:scale(1.5) rotate(5deg)
}
.roses {
position:absolute;
width:60px;
height:60px;
left:270px;
top:150px;
transform:scale(0.8)
}
.roses:after {
content:"";
position:absolute;
width:40px;
height:15px;
background-color:rgba(0,0,0,0.1);
bottom:0;
z-index:-2;
border-radius:100%;
left:0;
bottom:-3px
}
.roses .rose-leaves {
position:relative;
width:60%;
height:20px;
background-color:#a8e6ba;
border-radius:0 30px 30px 40px;
top:75%;
left:5px;
transform:scaleX(0.6) scaleY(0.5) rotate(20deg);
box-shadow:-1px 1px black,1px 1px black,1px -1px black
}
.roses .stems {
position:absolute;
width:2px;
height:25px;
border:.05em solid black;
background-color:#a8e6ba;
z-index:-1;
top:33px;
left:25px;
transform:rotate(-10deg)
}
.roses .stems:before,.roses .stems:after {
content:"";
position:absolute;
width:2px;
height:25px;
border:.05em solid black;
background-color:#a8e6ba;
z-index:-1
}
.roses .stems:before {
left:-3px;
transform:rotate(-30deg)
}
.roses .rose {
position:absolute;
width:30px;
height:30px;
transform:scale(1.2)
}
.roses .rose .rose-petal {
position:absolute;
background-color:#ffc6ec;
border:1px solid #b10076
}
.roses .rose .rose-petal:nth-child(1) {
width:12px;
height:15px;
border-radius:100%;
transform:skew(-10deg) rotate(-20deg);
left:-2px
}
.roses .rose .rose-petal:nth-child(2) {
width:10px;
height:13px;
border-radius:80%;
transform:skew(-5deg);
left:5px
}
.roses .rose .rose-petal:nth-child(3) {
width:10px;
height:12px;
border-radius:100%;
left:2px;
top:5px
}
.roses .rose .rose-petal:nth-child(4) {
width:10px;
height:10px;
border-radius:100%;
transform:skew(20deg) rotate(-30deg);
top:8px;
left:0
}
.roses .rose .rose-petal:nth-child(5) {
width:10px;
height:10px;
border-radius:80%;
transform:skew(-20deg);
left:5px;
top:8px
}
.roses .bunch>.rose:nth-child(1) {
left:12px;
top:12px
}
.roses .bunch>.rose:nth-child(2) {
left:0;
top:25px;
transform:scale(1.1) rotate(-20deg)
}
.roses .bunch>.rose:nth-child(3) {
left:25px;
top:30px;
transform:scale(1.2) rotate(20deg)
}
.grass-triangles {
position:absolute;
width:80px;
height:80px;
left:100px;
top:170px
}
.grass-triangles .grass-triangle {
position:absolute
}
.grass-triangles .grass-triangle:nth-child(1) {
border-bottom:18px solid #6ecdbf;
border-left:11px solid transparent;
border-right:6px solid transparent;
transform:rotate(16deg);
left:59px;
top:27px
}
.grass-triangles .grass-triangle:nth-child(2) {
border-bottom:19px solid #6ecdbf;
border-left:12px solid transparent;
border-right:12px solid transparent;
transform:rotate(-12deg);
left:68px;
top:13px
}
.grass-triangles .grass-triangle:nth-child(3) {
border-bottom:17px solid #6ecdbf;
border-left:12px solid transparent;
border-right:15px solid transparent;
transform:rotate(-38deg);
left:11px;
top:14px
}
.grass-triangles .grass-triangle:nth-child(4) {
border-bottom:20px solid #6ecdbf;
border-left:5px solid transparent;
border-right:14px solid transparent;
transform:rotate(-17deg);
left:23px;
top:34px
}
.grass-triangles .grass-triangle:nth-child(5) {
border-bottom:13px solid #6ecdbf;
border-left:4px solid transparent;
border-right:9px solid transparent;
transform:rotate(-34deg);
left:9px;
top:30px
}
.grass-triangles .grass-triangle:nth-child(5) {
border-bottom:13px solid #ffd286
}
.grass-triangles .grass-triangle:nth-child(6) {
border-bottom:16px solid #6ecdbf;
border-left:6px solid transparent;
border-right:4px solid transparent;
transform:rotate(20deg);
left:58px;
top:65px
}
.grass-triangles .grass-triangle:nth-child(7) {
border-bottom:11px solid #6ecdbf;
border-left:8px solid transparent;
border-right:4px solid transparent;
transform:rotate(-3deg);
left:3px;
top:11px
}
.grass-triangles .grass-triangle:nth-child(8) {
border-bottom:15px solid #6ecdbf;
border-left:10px solid transparent;
border-right:7px solid transparent;
transform:rotate(16deg);
left:26px;
top:39px
}
.grass-triangles .grass-triangle:nth-child(9) {
border-bottom:10px solid #6ecdbf;
border-left:5px solid transparent;
border-right:6px solid transparent;
transform:rotate(-15deg);
left:62px;
top:31px
}
.grass-triangles .grass-triangle:nth-child(10) {
border-bottom:13px solid #6ecdbf;
border-left:7px solid transparent;
border-right:13px solid transparent;
transform:rotate(-34deg);
left:34px;
top:3px
}
.grass-triangles .grass-triangle:nth-child(10) {
border-bottom:20px solid #ffd286
}
.grass-triangles .grass-triangle:nth-child(11) {
border-bottom:10px solid #6ecdbf;
border-left:11px solid transparent;
border-right:14px solid transparent;
transform:rotate(5deg);
left:50px;
top:69px
}
.grass-triangles .grass-triangle:nth-child(12) {
border-bottom:11px solid #6ecdbf;
border-left:7px solid transparent;
border-right:8px solid transparent;
transform:rotate(6deg);
left:4px;
top:18px
}
.grass-triangles .grass-triangle:nth-child(13) {
border-bottom:18px solid #6ecdbf;
border-left:10px solid transparent;
border-right:9px solid transparent;
transform:rotate(3deg);
left:28px;
top:51px
}
.grass-triangles .grass-triangle:nth-child(14) {
border-bottom:14px solid #6ecdbf;
border-left:4px solid transparent;
border-right:11px solid transparent;
transform:rotate(33deg);
left:26px;
top:38px
}
.triangles {
z-index:-2
}
.triangles .grass-triangles:nth-child(1) {
top:170px;
left:200px;
transform:scale(0.8) rotate(-25deg)
}
.triangles .grass-triangles:nth-child(2) {
top:200px;
left:100px;
transform:scale(0.8) rotate(-25deg)
}
.screen>.grass-triangles {
position:absolute
}
.screen>.grass-triangles:nth-child(1) {
top:60px;
left:380px;
transform:scaleX(1.2)
}
.screen>.grass-triangles:nth-child(2) {
top:30px;
left:130px;
transform:scaleX(1.2)
}
.flower-field .flowers:nth-child(1) {
left:150px;
top:180px;
z-index:2
}
.flower-field .flowers:nth-child(2) {
top:130px;
left:155px;
transform:scale(0.65);
z-index:-1
}
.flower-field .flowers:nth-child(3) {
top:150px;
left:405px
}
.flower-field .flowers:nth-child(4) {
top:170px;
left:360px
}
.flower-field .flowers:nth-child(5) {
top:190px;
left:310px
}
.flower-field .flowers:nth-child(6) {
top:210px;
left:260px
}
.flower-field .flowers:nth-child(7) {
top:130px;
left:260px
}
.flower-field .flowers:nth-child(8) {
left:190px;
top:160px
}
.flower-field .flowers:nth-child(9) {
top:330px;
left:35px;
z-index:2
}
.flower-field .flowers:nth-child(10) {
left:40px;
top:270px;
transform:scale(0.7)
}
.flower-field .flowers:nth-child(11) {
left:240px;
top:360px
}
.flower-field .flowers:nth-child(12) {
left:230px;
top:410px;
transform:scale(0.7)
}
.rose-field .roses:nth-child(1) {
top:130px;
display:none
}
.rose-field .roses:nth-child(2) {
left:140px;
top:300px
}
.rose-field .roses:nth-child(3) {
left:235px;
top:145px
}
.rose-field .roses:nth-child(4) {
left:430px;
top:60px;
z-index:-1
}
.rose-field .roses:nth-child(5) {
left:100px;
top:290px
}
.rose-field .roses:nth-child(6) {
left:10px;
top:300px
}
.rose-field .roses:nth-child(7) {
left:510px;
top:240px
}
.rose-field .roses:nth-child(8) {
left:550px;
top:270px
}
.rose-field .roses:nth-child(9) {
left:280px;
top:400px
}
.rose-field .roses:nth-child(10) {
left:580px;
top:100px
}
.rose-field .roses:nth-child(11) {
left:520px;
top:90px
}
.rose-field .roses:nth-child(12) {
left:550px;
top:130px
}
.isabelle {
width:100px;
height:150px;
position:absolute;
left:300px;
top:250px
}
.isabelle:after {
content:"";
position:absolute;
width:65px;
height:28px;
background-color:rgba(0,0,0,0.2);
z-index:-1;
right:25px;
border-radius:100%;
bottom:13px;
transform:skew(25deg)
}
.isabelle .head,.isabelle .face {
position:absolute;
left:calc(50% - 27px);
width:58px;
height:40px;
background-color:#ffe89e;
border-bottom-left-radius:20px;
border-bottom-right-radius:15px;
border-top-right-radius:15px;
border-top-left-radius:10px;
top:50px;
border:1px solid #ff9292;
background-image:radial-gradient(35px 30px at 70% 90%,white 60%,transparent 61%);
animation:rotateHead 8s ease infinite
}
@keyframes rotateHead {
50% {
transform:rotate(-10deg)
}
}@keyframes rotateEar {
50% {
z-index:-1;
transform:scaleX(-1) rotate(10deg)
}
}.isabelle .left-ear,.isabelle .right-ear,.isabelle .right-ear {
position:absolute;
background-color:#ffdc6b;
top:-22px
}
.isabelle .left-ear,.isabelle .right-ear {
width:30px;
height:65px;
border:1px solid brown;
border-radius:84% 16% 42% 58% / 79% 9% 91% 21%;
left:-15px;
transform:rotate(10deg)
}
.isabelle .right-ear {
transform:scaleX(-1) rotate(25deg);
z-index:-1!important;
left:30px
}
.isabelle .bangs {
position:absolute;
width:100%;
height:30px;
left:1px;
transform:scale(0.95);
z-index:2
}
.isabelle .bangs:before,.isabelle .bangs:after {
content:"";
position:absolute;
width:35px;
height:30px;
background-color:#ffe89e;
border:1px solid #ff6565;
top:-25px
}
.isabelle .bangs:before {
transform:scaleX(1.2) rotate(-25deg);
z-index:2;
border-radius:73% 27% 70% 50% / 88% 29% 71% 52%
}
.isabelle .bangs:after {
transform:rotate(10deg);
border-radius:30% 70% 30% 70% / 30% 77% 53% 70%;
left:30px
}
.isabelle .ponytail {
width:20px;
height:10px;
background-color:#ac0000;
position:absolute;
top:-32px;
left:20px;
border-radius:100%
}
.isabelle .ponytail:before,.isabelle .ponytail:after {
content:"";
position:absolute;
background-color:#ffe89e;
border:1px solid brown
}
.isabelle .ponytail:before {
width:28px;
height:28px;
border-radius:100%;
top:-25px;
left:-10px
}
.isabelle .ponytail:after {
width:20px;
height:20px;
border-radius:100%;
border-left:none;
border-top:0;
top:-17px;
left:10px
}
.isabelle .face {
top:initial;
animation:none
}
.isabelle .face .nose {
position:absolute;
width:10px;
height:5px;
background-color:black;
border-radius:100%;
left:65%;
top:20px
}
.isabelle .face .eyes {
position:absolute;
width:50px;
left:20px;
animation:toggleOpen 4s infinite
}
.isabelle .face .eyes:before,.isabelle .face .eyes:after {
content:"";
position:absolute;
width:12px;
height:12px;
border-top:3px solid black;
border-top-left-radius:100px;
border-top-right-radius:40px;
top:8px;
background-image:radial-gradient(1px 2px at 80% 40%,white 99%,transparent 100%),radial-gradient(3px 5px at 70% 35%,black 99%,transparent 100%)
}
.isabelle .face .eyes:after {
width:10px;
transform:scaleX(-1);
right:14px
}
.isabelle .face .closed {
position:absolute;
opacity:0;
left:45px;
animation:toggleClose 4s infinite
}
.isabelle .face .closed:before,.isabelle .face .closed:after {
content:"";
position:absolute;
width:12px;
height:12px;
border-bottom:3px solid black;
border-radius:100%;
top:5px
}
.isabelle .face .closed:after {
width:10px;
right:14px
}
.isabelle .face .cheeks {
position:absolute;
width:100%
}
.isabelle .face .cheeks:after {
content:"";
position:absolute;
width:6px;
height:2px;
background-color:#ffd038;
border:1px solid orange;
border-radius:100%;
left:15px;
top:22px
}
.isabelle .face .mouth {
position:absolute;
width:20px;
height:8px;
transform:scale(0.7);
background-color:maroon;
border:1px solid black;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
left:30px;
top:27px;
overflow:hidden
}
.isabelle .face .mouth:before {
content:"";
position:absolute;
width:9px;
height:4px;
background-color:pink;
border-radius:100%;
left:5px;
top:5px
}
.isabelle .dress {
position:absolute;
width:45px;
height:80px;
background-color:#4f4363;
top:50px;
left:30px;
background-image:radial-gradient(lavender 30%,transparent 0),radial-gradient(lavender 30%,transparent 0);
background-size:30px 30px;
background-position:0 0,15px 15px;
clip-path:polygon(20% 0,80% 0,100% 100%,0% 100%);
clip-path:polygon(37% 0,65% 0,100% 100%,0% 100%);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px
}
.isabelle .arm {
position:absolute;
width:10px;
height:30px;
background-image:linear-gradient(to bottom,#4f4363 30%,#ffe89e 31%);
border-radius:30px;
border:1px solid black
}
.isabelle .left-arm {
position:absolute;
left:24px;
top:86px;
transform:rotate(45deg)
}
.isabelle .right-arm {
position:absolute;
left:55px;
top:86px;
transform:rotate(25deg)
}
.isabelle .legs {
width:20px
}
.isabelle .legs:before,.isabelle .legs:after {
content:"";
position:absolute;
width:10px;
height:30px;
background-color:#ffe89e;
border-radius:90px;
border:1px solid black;
transform:rotate(-45deg)
}
.isabelle .legs:before {
top:115px;
left:45px
}
.isabelle .legs:after {
top:110px;
left:60px
}
.palm-tree,.palm-tree.joycon-tree {
position:absolute;
width:100px;
height:200px;
left:460px;
top:290px;
transform:scale(0.9)
}
.palm-tree:after,.palm-tree.joycon-tree:after {
content:"";
position:absolute;
width:60px;
height:40px;
background-color:rgba(0,0,0,0.1);
bottom:0;
z-index:-1;
border-radius:100%;
left:25px;
bottom:-10px
}
.palm-tree .palm-trunk {
position:absolute;
width:30px;
height:100px;
background-color:#df916a;
border-radius:30px;
bottom:0;
left:40%;
transform:rotate(-10deg);
background:linear-gradient(135deg,#d67240 25%,transparent 25%),linear-gradient(225deg,#d67240 25%,transparent 25%) -50px 0,linear-gradient(315deg,#d67240 25%,transparent 25%) -50px 0,linear-gradient(45deg,#d67240 25%,transparent 25%);
background-size:50px 50px;
background-color:#df916a;
border:1px solid black;
box-shadow:inset 0 30px 10px #7c2020
}
.palm-tree .palm-fruit {
position:absolute;
z-index:2
}
.palm-tree .palm-fruit:before,.palm-tree .palm-fruit:after {
content:"";
position:absolute;
background-color:#ffea71;
width:30px;
height:30px;
border-radius:100%;
border:1px solid brown;
box-shadow:inset 3px -3px goldenrod
}
.palm-tree .palm-fruit:before {
left:40px;
top:90px
}
.palm-tree .palm-fruit:after {
top:95px;
left:20px
}
.palm-tree .palm-leaves {
position:absolute
}
.palm-tree .palm-leaves .palm-leaf {
position:absolute;
width:90px;
height:40px;
background-color:#7abe7a;
border-top-left-radius:90px;
border-top-right-radius:90px;
border:1px solid black;
border-bottom:0;
display:flex;
justify-content:center;
align-items:baseline
}
.palm-tree .palm-leaves .palm-leaf .edges {
flex:1 1 0;
height:10px;
width:100%;
margin-top:35px;
border-radius:100%;
background-color:#7abe7a;
border-bottom:2px solid black
}
.palm-tree .palm-leaves .palm-leaf:nth-child(1) {
transform:rotate(-20deg);
left:30px;
top:50px;
animation:rotateLeaf1 3s ease infinite
}
.palm-tree .palm-leaves .palm-leaf:nth-child(2) {
transform:rotate(20deg);
left:-40px;
top:50px;
animation:rotateLeaf2 3s ease infinite
}
.palm-tree .palm-leaves .palm-leaf:nth-child(3) {
transform:rotate(-30deg);
left:-40px;
top:90px;
width:80px;
height:40px;
animation:rotateLeaf3 3s ease infinite
}
.palm-tree .palm-leaves .palm-leaf:nth-child(4) {
transform:rotate(20deg);
left:40px;
top:75px;
width:80px;
height:40px;
border-top:0;
animation:rotateLeaf2 3s ease infinite
}
@keyframes rotateLeaf1 {
50% {
transform:rotate(-25deg)
}
}@keyframes rotateLeaf2 {
50% {
transform:rotate(25deg)
}
}@keyframes rotateLeaf3 {
50% {
transform:rotate(-35deg)
}
}.palm-tree.joycon-tree {
left:650px;
transform:scaleX(-1);
top:50px
}
.palm-tree.joycon-tree:after {
content:"";
position:absolute;
width:60px;
height:40px;
background-color:rgba(0,0,0,0.3);
bottom:0;
z-index:-1;
border-radius:100%;
left:40px;
bottom:-10px
}
@keyframes toggleOpen {
0% {
opacity:1
}
18% {
opacity:1
}
20% {
opacity:0
}
25% {
opacity:1
}
38% {
opacity:1
}
40% {
opacity:0
}
45% {
opacity:1
}
80% {
opacity:1
}
}@keyframes toggleClose {
0% {
opacity:0
}
18% {
opacity:0
}
20% {
opacity:1
}
25% {
opacity:0
}
38% {
opacity:0
}
40% {
opacity:1
}
45% {
opacity:0
}
80% {
opacity:0
}
}
</style>
</head>
<body>
<div class="contaienr">
<div class="switch-container">
<div class="land grass"></div>
<div class="land small-patch"></div>
<div class="land path"></div>
<div class="land sand"></div>
<div class="land water"></div>
<div class="switch">
<div class="joycon blue">
<div class="minus"></div>
<div class="buttons"></div>
<div class="joystick"></div>
<div class="capture-button"></div>
</div>
<div class="screen">
<div class="grass-triangles">
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class="grass-triangle"></div>
<div class.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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