div+css实现带小河小屋狗狗的果园效果代码-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看