dur bak en iyisini yaptım
Bunu kendin dene hareket ediyor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Saturn</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 20px 0 0 20px;
background: #000;
}
.picture {
width: 360px;
height: 476px;
position: relative;
background: #f2f2f2;
overflow: hidden;
border-radius: 10px;
}
.moon {
width: 120px;
height: 120px;
border-radius: 100%;
background: #ffe8b0;
position: absolute;
top: 10px;
right: -10px;
filter: drop-shadow(0 0 10px #e9dab1) blur(1px);
}
.fragrans {
border-radius: 50% 50% 3px 5px;
height: 10px;
transform: rotate(35deg);
position: absolute;
z-index: 2;
}
.fragrans1 {
width: 200px;
box-shadow: 0 -12px 0 5px #716046;
top: 47px;
left: 77px;
}
.fragrans2 {
width: 180px;
box-shadow: 0 -10px 0 5px #716046;
top: 43px;
left: -60px;
}
.flower {
width: 24px;
height: 8px;
position: absolute;
z-index: 19;
transform: rotate(29deg);
border-radius: 10px;
}
.flower::before,
.flower::after {
content: '';
width: 24px;
height: 8px;
position: absolute;
border-radius: 10px;
background: #efc16e;
}
.flower::after {
left: 2px;
transform: rotate(90deg);
}
.flower.light::after,
.flower.light::before {
background: #efd9a8;
}
.flower1 {
left: 59px;
top: -12px;
}
.flower2 {
left: 48px;
top: 2px;
z-index: 18;
}
.flower3 {
left: 45px;
top: -12px;
transform: rotate(59deg) scale(0.8);
}
.flower4 {
left: 28px;
top: 9px;
}
.flower5 {
left: 47px;
top: 12px;
z-index: 18;
}
.flower6 {
left: 10px;
top: 14px;
z-index: 18;
transform: scale(0.8);
}
.flower7 {
left: 23px;
top: 26px;
}
.flower8 {
left: 53px;
top: 18px;
}
.flower9 {
left: 37px;
top: 38px;
z-index: 18;
}
.flower10 {
left: 14px;
top: 48px;
z-index: 18;
}
.flower11 {
left: 4px;
top: 31px;
z-index: 18;
}
.flower12 {
left: -1px;
top: 45px;
transform: scale(0.9);
}
.flower13 {
left: 25px;
top: 53px;
transform: scale(0.9);
}
.branch {
width: 50px;
height: 4px;
background: #716046;
border-radius: 4px;
position: absolute;
z-index: 9;
}
.branch1 {
left: 10px;
top: 10px;
transform: rotate(59deg);
}
.branch2 {
width: 40px;
left: 95px;
top: 7px;
transform: rotate(59deg);
}
.branch3 {
width: 40px;
left: 117px;
top: -28px;
transform: rotate(-59deg);
}
.flower21 {
left: 100px;
top: 8px;
transform: scale(0.9);
}
.flower22 {
left: 114px;
top: -5px;
transform: scale(0.8);
}
.flower23 {
left: 118px;
top: 15px;
z-index: 18;
transform: rotate(-59deg);
}
.flower24 {
left: 134px;
top: 2px;
transform: rotate(-59deg) scale(0.8);
}
.flower25 {
left: 135px;
top: -38px;
transform: rotate(-30deg) scale(0.6);
}
.flower26 {
left: 116px;
top: -49px;
z-index: 18;
transform: rotate(-49deg) scaleX(0.8);
}
.flower27 {
left: 138px;
top: -60px;
z-index: 18;
transform: scale(0.8);
}
.flower28 {
left: 120px;
top: -29px;
transform: rotate(-38deg);
}
.flower29 {
left: 127px;
top: -60px;
transform: scale(0.8);
}
.leaf {
width: 29px;
height: 28px;
background: #4e635c;
transform: rotate(75deg);
border-radius: 0 130px 0 200px;
position: absolute;
z-index: -1;
}
.leaf::after {
content: '';
width: 8px;
height: 3px;
background: #716046;
border-radius: 4px;
position: absolute;
top: 26px;
left: 24px;
transform: rotate(45deg);
z-index: -19;
}
.leaf21 {
left: 107px;
top: -53px;
transform: rotate(17deg);
}
.leaf31 {
left: 184px;
top: -45px;
}
.leaf32 {
left: 208px;
top: -34px;
transform: rotate(102deg);
}
.leaf33 {
left: 211px;
top: -10px;
transform: rotate(148deg);
}
.leaf34 {
left: 194px;
top: 6px;
transform: rotate(186deg);
}
.leaf35 {
left: 170px;
top: 11px;
transform: rotate(238deg);
}
.flower30 {
left: 174px;
top: -2px;
}
.flower31 {
left: 179px;
top: -19px;
z-index: 18;
transform: scale(0.8);
}
.flower32 {
left: 175px;
top: 19px;
z-index: 18;
transform: scale(0.8);
}
.flower33 {
left: 197px;
top: -29px;
}
.flower34 {
left: 191px;
top: -2px;
transform: rotate(38deg) scale(0.8);
}
.flower35 {
left: 204px;
top: -43px;
transform: rotate(95deg);
z-index: -20;
}
.flower36 {
left: 205px;
top: -11px;
z-index: 18;
transform: rotate(38deg);
}
.flower37 {
left: 189px;
top: 14px;
transform: rotate(38deg) scale(0.8);
}
.flower38 {
left: 160px;
top: 22px;
}
.flower39 {
left: 225px;
top: -20px;
transform: rotate(38deg) scale(0.8);
}
.flower310 {
left: 217px;
top: 4px;
}
.flower311 {
left: 223px;
top: -40px;
z-index: -18;
transform: rotate(38deg) scale(0.8);
}
.flowerSec-1 {
left: 54px;
top: -18px;
transform: scale(0.8);
}
.flowerSec-2 {
left: 59px;
top: -6px;
z-index: 18;
transform: rotate(38deg) scale(1.2);
}
.flowerSec-3 {
left: 75px;
top: -6px;
}
.leafSec-1 {
left: 169px;
top: -43px;
}
.leafSec-2 {
left: 187px;
top: -31px;
transform: rotate(102deg);
}
.leafSec-3 {
left: 192px;
top: -10px;
transform: rotate(148deg);
}
.leafSec-4 {
left: 176px;
top: 6px;
transform: rotate(186deg);
}
.leafSec-5 {
left: 153px;
top: 11px;
transform: rotate(238deg);
}
.flowerSec-20 {
left: 120px;
top: 7px;
transform: rotate(38deg) scale(0.8);
}
.flowerSec-21 {
left: 130px;
top: -8px;
z-index: 18;
transform: rotate(58deg) scale(1.5);
}
.flowerSec-22 {
left: 176px;
top: -31px;
z-index: 18;
transform: rotate(38deg) scale(1.2);
}
.flowerSec-23 {
left: 159px;
top: 25px;
z-index: 18;
transform: rotate(38deg) scale(1.5);
opacity: 0.8;
}
.flowerSec-24 {
left: 147px;
top: -6px;
transform: rotate(38deg) scale(0.8);
}
.flowerSec-25 {
left: 147px;
top: 23px;
}
.flowerSec-26 {
left: 175px;
top: 29px;
transform: rotate(38deg) scale(0.8);
}
.flowerSec-27 {
left: 180px;
top: -6px;
}
.flowerSec-28 {
left: 189px;
top: -29px;
transform: rotate(38deg) scale(0.8);
}
.flowerSec-29 {
left: 191px;
top: 16px;
}
.flowerSec-210 {
left: 204px;
top: -14px;
z-index: 18;
transform: rotate(8deg) scale(1.5);
opacity: 0.8;
}
.flowerSec-211 {
left: 213px;
top: -7px;
}
.flowerSec-212 {
left: 217px;
top: 18px;
transform: rotate(38deg) scale(0.8);
}
.flowerSec-213 {
left: 244px;
top: 10px;
animation: flowerSec213 8s ease-out infinite 1.5s;
opacity: 1;
z-index: 999;
}
@keyframes flowerSec213 {
0% {
left: 244px;
top: 10px;
opacity: 1;
}
70% {
left: 500px;
top: 160px;
opacity: 1;
}
74% {
left: 500px;
top: 163px;
opacity: 0.7;
}
78% {
left: 500px;
top: 166px;
opacity: 0.4;
}
82% {
left: 500px;
top: 160px;
opacity: 0;
}
85% {
left: 500px;
top: 160px;
opacity: 0;
}
95% {
left: 244px;
top: 10px;
opacity: 0;
}
100% {
left: 244px;
top: 10px;
opacity: 1;
}
}
.qiuqian {
width: 111px;
height: 240px;
border-left: 6px solid #8b847e;
border-right: 6px solid #8b847e;
position: absolute;
left: 0;
top: 0;
transform: rotate(-10deg) translateX(82px) translateY(63px);
animation: qiuqian 4s ease-out infinite 1.5s;
}
@keyframes qiuqian {
0% {
transform: rotate(-10deg) translateX(82px) translateY(63px);
}
50% {
transform: rotate(-20deg) translateX(106px) translateY(99px);
}
100% {
transform: rotate(-10deg) translateX(82px) translateY(63px);
}
}
.qiuqian-bottom {
width: 128px;
height: 14px;
border-radius: 10px;
position: absolute;
left: -8px;
bottom: -4px;
transform: rotate(1deg);
background: #9c8269;
}
.qiuqian-rabbit {
width: 54px;
height: 40px;
position: absolute;
top: -46px;
left: 32px;
}
.qiuqian-rabbit-body {
width: 56px;
height: 42px;
border-radius: 120% 100% 100% 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 20;
border: 2px solid #5d686a;
background: #f1f1f1;
}
.qiuqian-rabbit-tail {
width: 12px;
height: 10px;
border-radius: 180% 100% 100% 100%;
position: absolute;
left: 18px;
top: 20px;
z-index: 20;
border: 1px solid #5d686a;
background: #cfb3af;
}
.qiuqian-rabbit-ear {
width: 10px;
height: 30px;
border: 2px solid #5d686a;
border-bottom: none;
position: absolute;
border-radius: 100% 200%;
background: #f1f1f1;
transform: rotate(30deg);
}
.qiuqian-rabbit-ear1 {
top: -28px;
left: 12px;
transform: rotate(-20deg);
}
.qiuqian-rabbit-ear2 {
top: -28px;
left: 38px;
transform: rotate(20deg);
}
.plate {
width: 80px;
height: 40px;
border-radius: 100%;
position: absolute;
left: 54px;
bottom: 14px;
background: #bececd;
border: 1px solid #5d686a;
}
.plate::before {
content: '';
width: 74px;
height: 34px;
border-radius: 100%;
position: absolute;
left: 2px;
top: 2px;
border-left: 1px solid rgba(93, 107, 106, 0.3);
border-right: 1px solid rgba(93, 107, 106, 0.3);
border-bottom: 1px solid rgba(93, 107, 106, 0.3);
}
.mooncake {
width: 38px;
height: 18px;
border-radius: 100%;
border: 1px solid rgba(93, 107, 106, 0.2);
background: #edce8d;
box-shadow: 0px 6px 0px 0px #eac380, 0px 12px 0px 0px #e1c78a, 0px 12px 0px 1px rgba(93, 107, 106, 0.2);
z-index: 99;
position: absolute;
}
.mooncake1 {
right: 8px;
bottom: 25px;
}
.mooncake2 {
right: 34px;
bottom: 20px;
}
.flower-mooncake1 {
right: 8px;
bottom: 6px;
transform: scale(0.8) rotate(-18deg);
}
.mooncake-line {
width: 1px;
height: 10px;
position: absolute;
background: rgba(93, 107, 106, 0.2);
}
.mooncake-line1 {
height: 12px;
top: 10px;
left: -1px;
transform: rotate(1deg);
}
.mooncake-line2 {
top: 19px;
left: 8px;
}
.mooncake-line3 {
top: 20px;
left: 19px;
}
.mooncake-line4 {
top: 18px;
left: 30px;
}
.mooncake-line5 {
top: 10px;
left: 39px;
}
.teacup {
width: 40px;
height: 30px;
position: absolute;
bottom: 30px;
right: 55px;
z-index: 1;
}
.teacup-lid {
width: 40px;
height: 16px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
background: #bececd;
border: 1px solid #5d686a;
z-index: 29;
}
.teacup-inner {
position: absolute;
width: 40px;
height: 28px;
border-radius: 0 0 18px 18px;
left: 0;
top: 10px;
background: #bececd;
border: 1px solid #5d686a;
z-index: 19;
}
.teacup-bottom {
position: absolute;
width: 16px;
height: 4px;
border-radius: 0 0 2px 2px;
left: 12px;
top: 37px;
background: #bececd;
border: 1px solid #5d686a;
}
.rabbit {
width: 80px;
height: 54px;
position: absolute;
left: 126px;
bottom: 30px;
z-index: 10;
}
.rabbit-body {
width: 60px;
height: 43px;
border: 2px solid #5d686a;
border-radius: 100%;
position: absolute;
left: 18px;
top: 6px;
background: #f1f1f1;
z-index: 9;
transform: rotate(-3deg);
}
.rabbit-face {
width: 40px;
height: 40px;
border-radius: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 20;
border: 2px solid #5d686a;
background: #f1f1f1;
}
.rabbit-eye {
width: 3px;
height: 5px;
border-radius: 100%;
background: #5f5b5c;
position: absolute;
top: 15px;
z-index: 499;
}
.rabbit-eye-left {
left: 11px;
}
.rabbit-eye-right {
left: 22px;
}
.rabbit-rouge {
width: 5px;
height: 3px;
border-radius: 100%;
background: #dcb5b0;
position: absolute;
z-index: 489;
box-shadow: 0 0 2px 2px #dcb5b0;
}
.rabbit-rouge-left {
top: 23px;
left: 5px;
transform: rotate(20deg);
}
.rabbit-rouge-right {
top: 22px;
left: 26px;
transform: rotate(-30deg);
}
.rabbit-mouth {
width: 2px;
height: 2px;
border-radius: 100%;
background: #5f5b5c;
position: absolute;
top: 30px;
left: 16px;
z-index: 99;
}
.rabbit-ear {
width: 10px;
height: 30px;
border: 2px solid #5d686a;
border-bottom: none;
position: absolute;
border-radius: 100% 200%;
background: #f1f1f1;
transform: rotate(30deg);
}
.rabbit-ear-left {
top: -28px;
left: 12px;
transform: rotate(30deg);
}
.rabbit-ear-right {
top: -26px;
left: 28px;
transform: rotate(45deg);
}
.rabbit-tail {
width: 12px;
height: 14px;
border: 1px solid #5d686a;
background: #cbaaa5;
border-radius: 100%;
position: absolute;
right: -8px;
top: 15px;
z-index: -1;
}
.rabbit-leg {
width: 24px;
height: 10px;
border: 2px solid #5d686a;
border-radius: 100% 100% 10px 10px;
position: absolute;
background: #f1f1f1;
z-index: 2;
}
.rabbit-leg1 {
left: 10px;
bottom: 0px;
transform: rotate(11deg);
}
.rabbit-leg2 {
left: 16px;
bottom: -3px;
z-index: 4;
}
.rabbit-leg3 {
left: 52px;
bottom: 1px;
transform: rotate(-13deg);
}
.rabbit-leg4 {
left: 45px;
bottom: -6px;
transform: rotate(-30deg);
}
</style>
</head>
<body>
<div class='picture'>
<div class='moon'></div>
<div class='fragrans fragrans1'>
<div class='flower flower1'></div>
<div class='flower flower2 light'></div>
<div class='flower flower3'></div>
<div class='flower flower4'></div>
<div class='flower flower5 light'></div>
<div class='flower flower6 light'></div>
<div class='flower flower7'></div>
<div class='flower flower8'></div>
<div class='flower flower9 light'></div>
<div class='flower flower10 light'></div>
<div class='flower flower11 light'></div>
<div class='flower flower12'></div>
<div class='flower flower13'></div>
<div class='branch branch1'></div>
<div class='leaf leaf21'></div>
<div class='branch branch2'></div>
<div class='branch branch3'></div>
<div class='flower flower21'></div>
<div class='flower flower22'></div>
<div class='flower flower23 light'></div>
<div class='flower flower24'></div>
<div class='flower flower25'></div>
<div class='flower flower26 light'></div>
<div class='flower flower27 light'></div>
<div class='flower flower28'></div>
<div class='flower flower29'></div>
<div class='leaf leaf31'></div>
<div class='leaf leaf32'></div>
<div class='leaf leaf33'></div>
<div class='leaf leaf34'></div>
<div class='leaf leaf35'></div>
<div class='flower flower30'></div>
<div class='flower flower31 light'></div>
<div class='flower flower32 light'></div>
<div class='flower flower33'></div>
<div class='flower flower34'></div>
<div class='flower flower35'></div>
<div class='flower flower36 light'></div>
<div class='flower flower37'></div>
<div class='flower flower38'></div>
<div class='flower flower39'></div>
<div class='flower flower310'></div>
<div class='flower flower311 light'></div>
</div>
<div class='fragrans fragrans2'>
<div class='flower flowerSec-1'></div>
<div class='flower flowerSec-2 light'></div>
<div class='flower flowerSec-3'></div>
<div class='leaf leafSec-1'></div>
<div class='leaf leafSec-2'></div>
<div class='leaf leafSec-3'></div>
<div class='leaf leafSec-4'></div>
<div class='leaf leafSec-5'></div>
<div class='flower flowerSec-20'></div>
<div class='flower flowerSec-21 light'></div>
<div class='flower flowerSec-22 light'></div>
<div class='flower flowerSec-23 light'></div>
<div class='flower flowerSec-24'></div>
<div class='flower flowerSec-25'></div>
<div class='flower flowerSec-26'></div>
<div class='flower flowerSec-27'></div>
<div class='flower flowerSec-28'></div>
<div class='flower flowerSec-29'></div>
<div class='flower flowerSec-210 light'></div>
<div class='flower flowerSec-211'></div>
<div class='flower flowerSec-212'></div>
<div class='flower flowerSec-213'></div>
</div>
<div class='qiuqian'>
<div class='qiuqian-bottom'>
<div class='qiuqian-rabbit'>
<div class='qiuqian-rabbit-ear qiuqian-rabbit-ear1'></div>
<div class='qiuqian-rabbit-ear qiuqian-rabbit-ear2'></div>
<div class='qiuqian-rabbit-body'>
<div class='qiuqian-rabbit-tail'></div>
</div>
</div>
</div>
</div>
<div class='plate'>
<div class='mooncake mooncake1'>
<div class='mooncake-line mooncake-line1'></div>
<div class='mooncake-line mooncake-line2'></div>
<div class='mooncake-line mooncake-line3'></div>
<div class='mooncake-line mooncake-line4'></div>
<div class='mooncake-line mooncake-line5'></div>
<div class='flower flower-mooncake1'></div>
</div>
<div class='mooncake mooncake2'>
<div class='mooncake-line mooncake-line1'></div>
<div class='mooncake-line mooncake-line2'></div>
<div class='mooncake-line mooncake-line3'></div>
<div class='mooncake-line mooncake-line4'></div>
<div class='mooncake-line mooncake-line5'></div>
<div class='flower flower-mooncake1'></div>
</div>
</div>
<div class='teacup'>
<div class='teacup-lid'></div>
<div class='teacup-inner'></div>
<div class='teacup-bottom'></div>
</div>
<div class='rabbit'>
<div class='rabbit-face'>
<div class='rabbit-eye rabbit-eye-left'></div>
<div class='rabbit-eye rabbit-eye-right'></div>
<div class='rabbit-rouge rabbit-rouge-left'></div>
<div class='rabbit-rouge rabbit-rouge-right'></div>
<div class='rabbit-mouth'></div>
<div class='rabbit-ear rabbit-ear-left'></div>
<div class='rabbit-ear rabbit-ear-right'></div>
</div>
<div class='rabbit-body'></div>
<div class='rabbit-leg rabbit-leg1'></div>
<div class='rabbit-leg rabbit-leg2'></div>
<div class='rabbit-leg rabbit-leg3'></div>
<div class='rabbit-leg rabbit-leg4'></div>
<div class='rabbit-tail'></div>
</div>
</div>
</div>
</body>
</html>