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)
}
.tree.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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