Emmes

MJ9.- Funko Doll (random)

Dec 10th, 2019
472
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.16 KB | None | 0 0
  1. <div class="MJ9"><div><corona></corona><trenzas><b></b><b></b></trenzas><cabeza><pelo></pelo><ojos><b><i></i></b><b><i></i></b></ojos><nariz></nariz></cabeza><cuerpo><brazos><b></b><b></b></brazos><torso></torso><piernas><b><i></i></b><b><i></i></b></piernas></cuerpo></div><sombra></sombra></div><a class="miMJ9" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>
  2.  
  3. <style>.MJ9, .MJ9 * {box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin;} @keyframes cuerpo {from {transform: translateY(-10px);} to {transform: translateY(10px);}} .MJ9 {width: 200px; margin: 0 auto 20px; position: relative;} .MJ9 > div {padding: 20px; animation: cuerpo 1s infinite alternate;} @keyframes coro {from {margin-top: 3px;} to {margin-top: -10px;}} corona {position: absolute; background: #ff7e93; width: 30px; height: 20px; clip-path: polygon(31% 40%, 49% 0, 68% 40%, 100% 28%, 85% 100%, 15% 100%, 0 25%); top: -5px; right: 40px; transform: rotate(15deg); animation: coro 1s infinite alternate;} .MJ9 cabeza {background: #ffe0d0; display: block; height: 120px; border-radius: 40px; position: relative; overflow: hidden;} .MJ9 pelo, .MJ9 pelo:before {position: absolute; width: 150px; height: 150px; border-radius: 50%; background: #222; bottom: calc(100% - 65px); left: -40px; border-bottom: 5px solid #222; padding-bottom: 3px; background-clip: content-box;} .MJ9 pelo::before {content: ""; bottom: 0; left: 91%; border-bottom: 3px solid #222;} nariz {position: absolute; width: 10px; height: 15px; background: #f7c8b0; bottom: 25px; left: calc(50% - 5px); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);} .MJ9 ojos {position: absolute; bottom: 25px; left: 50%;} .MJ9 ojos b {position: absolute; width: 35px; height: 35px; bottom: 0;} @keyframes ojos {0% {top: 0; bottom: 0;} 5% {top: 50%; bottom: 50%;} 10% {top: 0; bottom: 0;}} .MJ9 ojos b i {background: #222; border-radius: 50%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; animation: ojos 5s infinite;} .MJ9 ojos b ~ b i {animation-delay: 0.1s;} .MJ9 ojos b:nth-of-type(1) {left: 30px;} .MJ9 ojos b:nth-of-type(2) {right: 30px;} .MJ9 ojos b::before {content: ""; position: absolute; width: 34px; height: 20px; border-radius: 50%; border-top: 3px solid #333; top: -11px; left: calc(50% - 17px);} .MJ9 ojos b i::after {content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #FFF; top: 7px; left: 7px;} cuerpo {position: relative;} torso {width: 70px; height: 70px; display: block; background: #ff7e94; margin: auto; clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%); border-radius: 0 0 30px 30px; box-shadow: inset 0 50px 50px -50px #ff3434; position: relative; z-index: 5;} brazos {position: relative; display: block; margin: auto; width: 0;} brazos b {position: absolute; width: 15px; height: 80px; background: #ffe0d0; border-radius: 20px; transform-origin: top center; top: 5px;} @keyframes extrea {from {transform: rotate(-20deg);} to {transform: rotate(-40deg);}} @keyframes extreb {from {transform: rotate(20deg);} to {transform: rotate(40deg);}} brazos b:nth-of-type(1) {left: 10px; animation: extrea 1s infinite alternate;} brazos b:nth-of-type(2) {right: 10px; animation: extreb 1s infinite alternate;} piernas {display: block; width: 0px; margin: -10px auto 0; height: 100px; position: relative;} piernas b {position: absolute; width: 15px; background: #ffe0d0; height: 100%; border-radius: 220px; transform-origin: top center;} piernas b:nth-of-type(1) {left: 7px; transform: rotate(3deg);} piernas b:nth-of-type(2) {right: 7px; transform: rotate(-3deg);} piernas b::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 40px; background: repeating-linear-gradient( #333, #333 10px, #FBAFBC 10px, #FBAFBC 20px);} piernas b i {position: absolute; bottom: -2px; left: -2px; right: -2px; height: 20px; background: #ff5964; border-radius: 0 0 20px 20px;} piernas b i::before {content: ""; position: absolute; background: #ffe0d0; top: 5px; left: 5px; right: 5px; height: 5px; border-radius: 0 0 3px 3px;} trenzas {position: absolute; width: 0; left: 50%; top: 130px;} @keyframes trena {from {transform: rotate(0deg);} to {transform: rotate(-15deg);}} @keyframes trenb {from {transform: rotate(0deg);} to {transform: rotate(15deg);}} trenzas b {position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #222; top: 0; transform-origin: top center;} trenzas b:nth-of-type(1) {left: 40px; animation: trena 1s infinite alternate;} trenzas b:nth-of-type(2) {right: 40px; animation: trenb 1s infinite alternate;} trenzas b::before, trenzas b::after {content: ""; border-radius: 50%; background: #222; position: absolute;} trenzas b:before {width: 14px; height: 14px; top: 100%; left: calc(50% - 7px);} trenzas b:after {width: 10px; height: 10px; top: calc(100% + 14px); left: calc(50% - 5px);} sombra {width: 70px; margin: auto; height: 24px; display: block; background: #0006; border-radius: 50%; box-shadow: 0 0 10px 10px #0006; animation: som 1s infinite alternate;} @keyframes som {from {transform: scale(.6);} to {transform: scale(1);}} .miMJ9 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miMJ9:hover {letter-spacing: 10px;}</style>
Advertisement
Add Comment
Please, Sign In to add comment