English, asked by simran637795, 8 months ago

how we insert these types of emoji in brainy

Attachments:

Answers

Answered by Anonymous

Answer:

try this one $<!DOCTYPE html> <html lang="en"> <head> <title>Infinix</title> </head> <body> <div class="face"> <div class="forhead"> </div> <div class="cheeks"></div> <div class="ear"></div> <div class="eyebrow left"></div> <div class="eyebrow right"> </div> <div class="eye left"></div> <div class="eye right"></div> <div class="mouth"></div> <div class="shy"> </div> <div class="shy right"></div> </div> <style> body { background:#3e505e } .face { height: 600px; width: 350px; position: relative; margin: auto; } .face:before { content:''; background:black; height:122px; width:95px; position:absolute; z-index:6; left:210px; top:29px; border-radius:100% 190% 100% 0%; transform: rotate(-20deg); } .face:after { content:''; width:230px; height:180px; background:black; content:''; transform: rotate(-8deg); position:absolute; border-radius:100% 160% 100% 0%; left:70px; bottom:-14px; top:10px; z-index:5; } .forhead, .forhead:after { content: ''; width: 220px; height: 181px; background: #fbc6a3; content: ''; transform: rotate(-3deg); position: absolute; border-radius: 60% 120% 50% 0%; left: 67px; bottom: -14px; top: 21px; z-index: 6; } .forhead:after { width: 160px; height: 150px; border-radius: 150% 174% 159% 100%; transform: rotate(-20deg); top: 13px; left: 59px; border-top: 15px solid #fbc6a3; } .forhead:before{ background:#fbc6a3; width:60px; height:10px; content:''; position:absolute; z-index:7; left:105px; top:9px; transform: rotate(13deg); border-radius:100% } .ear { width:60px; height:50px; background:#fbc6a3; z-index:7; position:absolute; border-radius:300% 190% 200% 100%; transform: rotate(-20deg); top:110px; left:285px } .cheeks { background: #fbc6a3; width: 280px; height: 100px; border-radius: 50px 0px 50px 40px; transform: rotate(-3deg); position: relative; content: 'a'; top: 108px; left:10px } .cheeks:after { width: 297px; height: 100px; background: #fbc6a3; content: ''; transform: rotate(-3deg); position: absolute; border-radius: 100% 100% 100% 100%; left: 1px; bottom: -14px; } .eye { width:40px; height:40px; position:relative; background:black; border-radius:100%; animation: close-eye 4s none .2s infinite; } .eye:after { content:''; position:absolute; background:white; width:15px; height:15px; border-radius:100%; left:17px; top:12px; } .eye:before { content:''; position:absolute; width:70px; height:60px; border-radius:100%; border-top:2px solid black; left:-20px; margin-top:-20px; } .eye.left,.eye.right { position:absolute; top:80px; left:100px; z-index:10; } .eye.right { left:190px; top:90px; } .eyebrow { animation: eyebroani 2s linear .2s infinite; } .eyebrow,.eyebrow:after { position:absolute; width:20px; height:60px; background:black; z-index:8; border-radius:15px; transform: rotate(40deg); top:10px; left:90px; } .eyebrow:after { content:''; transform: rotate(-100deg); left:19px; margin-top:-23px; top:auto; } .eyebrow.right { left:180px; top:8px; transform: rotate(50deg); } .mouth { position:absolute; width:40px; height:40px; background:#76322f; border-radius:100%; top:180px; left:50px; z-index:8; } .shy { position:absolute; width:0px; height:0px; border-radius:100%; opacity:0; box-shadow: 0px 0px 40px 20px red; z-index:8; left:35px; top:160px; animation: shy 10s linear .2s infinite; } .shy.right { left:170px; top:180px; } @keyframes eyebroani { 0% {margin-top:auto} 10% {margin-top:-10px} 20% {margin-top:auto} 30% {margin-top:-10px} 40% {margin-top: auto} 100% {margin-top:auto} } @keyframes shy { 0% {opacity:0} 10% {opacity:0.2} 90% {opacity:0.2} 100% {opacity:0} } @keyframes close-eye { 0% { height: 40px; margin-top: auto; overflow: auto; } 5% { height: 2px; margin-top: 20px; overflow: hidden; } 5.1% { height: 40px; margin-top:0; overflow:visible; } } </style> </body> </html>$

Answered by singhmohit097937

$<!DOCTYPE html><html lang="en"><head><title>Koala</title></head><body><div class="character"><div class="head"><div class="ear ear-left"> </div><div class="ear ear-rigth"> </div><div class="eyes"></div><div class="nose"></div><div class="lip"></div></div><div class="body"><div class="hand hand-right"></div><div class="hand hand-left"></div></div></div><style>body {display: flex; justify-content: center; padding-top: 150px;}.character {position: relative;}.character .head {height: 125px; width: 155px; background: #94e1fd; border-radius: 80px 89px 55px 55px; position: relative; border: 4px solid black; top: 6px;}.character .head:after {content: ""; position: absolute; bottom: -43%; width: 40px; height: 50px; background: white; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; left: 42%;}.ear {width: 78px; height: 78px; background: white; border-radius: 38% 62% 57% 43% / 45% 48% 52% 55%; border: 4px solid black; position: absolute;}.ear-left {top: -24%; left: -24%; border-bottom-color: #94e1fd; transform: rotate(-49deg); box-shadow: inset 6px 20px 0px 12px #94e1fd, inset -20px 18px 0 0px #94e1fd, inset 3px -9px 0 0px #94e1fd; animation: ear-left 2s infinite linear;}.ear-left:before {content: ""; width: 4px; height: 6px; border-radius: 50%; background: black; position: absolute; top: 31px; left: 110%; transform: rotate(-76deg); box-shadow: 15px 12px, 30px 0px; opacity: 0; animation: ear-left-after 2s infinite linear;}.ear-rigth {left: 65%; top: -24%; transform: rotate(-227deg); z-index: -1; box-shadow: inset 20px -4px 0px 13px #94e1fd, inset 20px -11px 0 0px #94e1fd, inset 20px 19px 0 0px #94e1fd; animation: ear-right 2s infinite linear;}.eyes {width: 14px; height: 10px; background: black; position: absolute; border-radius: 50%; top: 46%; left: 28%; box-shadow: 65px 0px; animation: eyes 2s infinite linear;}.eyes:after {content: ""; width: 14px; height: 3px; background: black; position: absolute; border-radius: 50%; bottom: -57%; box-shadow: 65px 0px;}.nose {width: 31px; height: 35px; background: #6f69ef; border-radius: 53% 47% 59% 41% / 73% 76% 24% 27%; border: 4px solid; position: absolute; top: 43%; left: 43%; animation: nose 2s infinite linear;}.lip {width: 34px; height: 4px; background: black; position: absolute; border-radius: 25%; top: 83%; left: 45%; animation: lip 2s infinite linear;}.body {position: relative; z-index: -1;}.body:after, .body:before {content: ""; border-radius: 50%; width: 44px; height: 105px; border: 4px solid; position: absolute; background: #94e1fd; border-right-color: transparent; left: 24%; top: -8px;}.body:after {left: 46%; border-left-color: transparent; border-right-color: black;}.hand {border-right-color: transparent; width: 34px; height: 55px; border-radius: 71% 29% 22% 78% / 17% 78% 22% 83%; background: #94e1fd; border: 4px solid; position: absolute; left: 8%; top: -2px; border-top-color: #94e1fd; transform: rotate(39deg);}.hand-left {left: 63%; transform: rotate(-27deg); border-radius: 59% 41% 32% 68% / 20% 62% 38% 80%; border-left-color: transparent;}@keyframes eyes {100% {height: 30px; top: 22%; width: 10px;}}@keyframes nose {100% {top: 22%;}}@keyframes lip {100% {background: #f77676; height: 25px; width: 25px; top: 72%; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: translateY(-10px);}}@keyframes ear-left {100% {border-bottom-color: black; top: 165%; transform: rotate(-175deg); height: 24px;}}@keyframes ear-right {100% {top: 165%; transform: rotate(-175deg); height: 24px;}}@keyframes ear-left-after{95%{opacity: 0;}100%{opacity: 1;}}</style></body></html>$

Previous Question

Next Question

how we insert these types of emoji in brainy​

Answers

how we insert these types of emoji in brainy