纯css布局实现一个狗狗的家
代码语言:html
所属分类:布局界面
代码描述:纯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: 24px; height: 24px; left: -5px; animation: scaleBubble 2s 1.2s linear infinite; } .bubbles .bubble:nth-child(2) { width: 36px; height: 36px; left: 0px; animation: scaleBubble 3s 1.2s linear infinite; } .bubbles .bubble:nth-child(3) { width: 30px; height: 30px; left: 5px; animation: scaleBubble 2s 1.2s linear infinite; } .bubbles .bubble:nth-child(4) { width: 24px; height: 24px; left: 10px; animation: scaleBubble 2s 0.2s linear infinite; } .bubbles .bubble:nth-child(5) { width: 32px; height: 32px; left: 15px; animation: scaleBubble 3s 0.2s linear infinite; } .bubbles .bubble:nth-child(6) { width: 27px; height: 27px; left: 20px; animation: scaleBubble 3s 0.2s linear infinite; } .bubbles .bubble:nth-child(7) { width: 39px; height: 39px; left: 25px; animation: scaleBubble 1s 0.2s linear infinite; } .bubbles .bubble:nth-child(8) { width: 34px; height: 34px; left: 30px; animation: scaleBubble 2s 1.2s linear infinite; } .bubbles .bubble:nth-child(9) { width: 35px; height: 35px; left: 35px; animation: scaleBubble 2s 1.2s linear infinite; } .bubbles .bubble:nth-child(10) { width: 46px; height: 46px; left: 40px; animation: scaleBubble 1s 0.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 0px 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 0px; 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 5s 0.1s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(2) { animation: flow 5s 0.2s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(3) { animation: flow 2s 0.3s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(4) { animation: flow 2s 0.4s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(5) { animation: flow 5s 0.5s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(6) { animation: flow 4s 0.6s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(7) { animation: flow 5s 0.7s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(8) { animation: flow 4s 0.8s linear infinite; } .switch .screen .river .flow-container .flow:nth-child(9) { animation: flow 4s 0.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 1s linear infinite; } .switch .screen .river .river-row:nth-child(1) > .streak:nth-child(2) { animation: streak 1s 0s 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 1s 0s linear infinite; } .switch .screen .river .river-row:nth-child(1) > .streak:nth-child(5) { animation: streak 3s 0s linear infinite; } .switch .screen .river .river-row:nth-child(1) > .streak:nth-child(6) { animation: streak 3s 1s linear infinite; } .switch .screen .river .river-row:nth-child(1) > .streak:nth-child(7) { animation: streak 1s 0s 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 2s 0s linear infinite; } .switch .screen .river .river-row:nth-child(2) > .streak:nth-child(2) { animation: streak 2s 0s linear infinite; } .switch .screen .river .river-row:nth-child(2) > .streak:nth-child(3) { animation: streak 3s 1s linear infinite; } .switch .screen .river .river-row:nth-child(2) > .streak:nth-child(4) { animation: streak 3s 1s linear infinite; } .switch .screen .river .river-row:nth-child(2) > .streak:nth-child(5) { animation: streak 3s 1s linear infinite; } .switch .screen .river .river-row:nth-child(2) > .streak:nth-child(6) { animation: streak 1s 1s linear infinite; } .switch .screen .river .river-row:nth-child(2) > .streak:nth-child(7) { animation: streak 3s 1s 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 0px, 0px 0px; } .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: 0.09em solid black; border-right: 0.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 0px; 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: 0px 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: 0.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: 0.1em solid black; border-top: none; 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: 0px; 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: 0.05em solid black; box-shadow: none; } .trees .tree .cherry-blossoms:before, .trees .tree .cherry-blossoms:after { background-color: #ffd9df; border: 0.05em solid black; border-top: none; 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: 0px; } .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: 0px; 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: 0px; 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: 0.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: 0.003em solid black; box-shadow: inset 2px -2px #fad500, -0.06em 0.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 0px #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: 0px -3px brown; } .house .entrance .window:after { width: 10px; height: 50%; left: calc(50% - 5px); box-shadow: -3px 0px 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: 0px; } .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: 0px; 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: 0.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: 0.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: 0px; } .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: 0px; 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: 13px solid #6ecdbf; border-left: 9px solid transparent; border-right: 13px solid transparent; transform: rotate(-23deg); left: 68px; top: 4px; } .grass-triangles .grass-triangle:nth-child(2) { border-bottom: 13px solid #6ecdbf; border-left: 14px solid transparent; border-right: 4px solid transparent; transform: rotate(27deg); left: 28px; top: 16px; } .grass-triangles .grass-triangle:nth-child(3) { border-bottom: 14px solid #6ecdbf; border-left: 8px solid transparent; border-right: 15px solid transparent; transform: rotate(7deg); left: 63px; top: 58px; } .grass-triangles .grass-triangle:nth-child(4) { border-bottom: 19px solid #6ecdbf; border-left: 14px solid transparent; border-right: 3px solid transparent; transform: rotate(18deg); left: 22px; top: 48px; } .grass-triangles .grass-triangle:nth-child(5) { border-bottom: 16px solid #6ecdbf; border-left: 10px solid transparent; border-right: 12px solid transparent; transform: rotate(-16deg); left: 63px; top: 68px; } .grass-triangles .grass-triangle:nth-child(5) { border-bottom: 11px solid #ffd286; } .grass-triangles .grass-triangle:nth-child(6) { border-bottom: 16px solid #6ecdbf; border-left: 11px solid transparent; border-right: 13px solid transparent; transform: rotate(-29deg); left: 62px; top: 67px; } .grass-triangles .grass-triangle:nth-child(7) { border-bottom: 14px solid #6ecdbf; border-left: 3px solid transparent; border-right: 15px solid transparent; transform: rotate(24deg); left: 1px; top: 39px; } .grass-triangles .grass-triangle:nth-child(8) { border-bottom: 19px solid #6ecdbf; border-left: 10px solid transparent; border-right: 5px solid transparent; transform: rotate(-32deg); left: 16px; top: 25px; } .grass-triangles .grass-triangle:nth-child(9) { border-bottom: 11px solid #6ecdbf; border-left: 10px solid transparent; border-right: 11px solid transparent; transform: rotate(24deg); left: 2px; top: 40px; } .grass-triangles .grass-triangle:nth-child(10) { border-bottom: 17px solid #6ecdbf; border-left: 12px solid transparent; border-right: 9px solid transparent; transform: rotate(-39deg); left: 67px; top: 29px; } .grass-triangles .grass-triangle:nth-child(10) { border-bottom: 17px solid #ffd286; } .grass-triangles .grass-triangle:nth-child(11) { border-bottom: 14px solid #6ecdbf; border-left: 4px solid transparent; border-right: 9px solid transparent; transform: rotate(19deg); left: 10px; top: 39px; } .grass-triangles .grass-triangle:nth-child(12) { border-bottom: 19px solid #6ecdbf; border-left: 7px solid transparent; border-right: 9px solid transparent; transform: rotate(-22deg); left: 3px; top: 65px; } .grass-triangles .grass-triangle:nth-child(13) { border-bottom: 19px solid #6ecdbf; border-left: 9px solid transparent; border-right: 10px solid transparent; transform: rotate(0deg); left: 43px; top: 26px; } .grass-triangles .grass-triangle:nth-child(14) { border-bottom: 10px solid #6ecdbf; border-left: 10px solid transparent; border-right: 7px solid transparent; transform: rotate(6deg); left: 48px; top: 69px; } .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: none; 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 0px 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: none; 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: none; 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="grass-triangle"></div> <div class="grass-triangle"></div> <div class="grass-triangle"></div> <div class="grass-triangle"></div> <div class="grass-triangle"></div> </div> <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="grass-triangle"></div> <div class="grass-triangle"></div> <div class="grass-triangle"></div> <div class="grass-triangle"></div> <div class="grass-triangle"></div> </div> <div class="river"> <div class="river-row"> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> </div> <div class="river-row"> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> <div class="streak"></div> </div> <div class="flow-container"> <div class="flow"></div> <div class="flow"></div> <div class="flow"></div> <div class="flow"></div> <div class="flow"></div> <div class="flow"></div> <div class="flow"></div> <div class="flow"></div> <div class="flow"></div> </div> </div> <div class="grass-sand"></div> <div class="blanket"></div> </div> <div class="joycon red"> <div class="plus"></div> <div class="buttons"></div> <div class="joystick"></div> <div class="home-button"></div> </div> </div> <div class="joycon-blue-base"></div> <div class="black-base"></div> <div class="joycon-red-base"></div> <div class="switch-base"> <div class="joycon-shadow-blue"></div> <div class="screen-shadow"></div> <div class="joycon-shadow-red"></div> </div> </div> <div class="scene-overlay"> <div class="bubbles"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> </div> <div class="triangles"></div> <div class="house"> <div class="roof"> <div class="decal"></div> </div> <div class="entrance"> <div class="window"></div> </div> <div class="side"> <div class="side-window"></div> </div> <div class="roof-top&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0