Computer Science, asked by aaravgaur1952, 8 months ago

<marquee direction="up">⬆️⬆️⬆️⬆️
<marquee>How to give this type of effect </marquee>
<body bgcolor=black>\large\orange{Don't be spam}<font color=gold>

Attachments:

Answers

Answered by BrainlyHero80
1

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;title&gt;Shinchan&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="face"&gt;&lt;div class="forhead"&gt;&lt;/div&gt;&lt;div class="cheeks"&gt;&lt;/div&gt;&lt;div class="ear"&gt;&lt;/div&gt;&lt;div class="eyebrow left"&gt;&lt;/div&gt;&lt;div class="eyebrow right"&gt;&lt;/div&gt;&lt;div class="eye left"&gt;&lt;/div&gt;&lt;div class="eye right"&gt;&lt;/div&gt;&lt;div class="mouth"&gt;&lt;/div&gt;&lt;div class="shy"&gt;&lt;/div&gt;&lt;div class="shy right"&gt;&lt;/div&gt;&lt;/div&gt;&lt;style&gt;body {background:#FFFF00}.face {height: 500px;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;height180px;background:black;content:'';transform: rotate(-8deg);position:absolute;</p><p>border-radius:100% 160% 100% 0%;left:70px;</p><p>bottom:-14px;top:10px;z-index</p><p>5;}.forhead, .forhead:after {content: '';width: 220px;height: 181px;background: #fbc6a3;content: '';transform: rotate(-3deg);</p><p>position: absolute;border-radius: 60% 120% 50% 0%;left: 67px;bottom: -14px;top: 21px;z-index: 6;</p><p></p><p>}</p><p></p><p>.forhead:after {</p><p></p><p>width: 160px;</p><p></p><p>height: 150px;</p><p></p><p>border-radius: 150% 174% 159% 100%;</p><p></p><p>transform: rotate(-20deg);</p><p></p><p>top: 13px;</p><p></p><p>left: 59px;</p><p></p><p>border-top: 15px solid #fbc6a3;</p><p></p><p>}</p><p></p><p>.forhead:before{</p><p></p><p>background:#fbc6a3;</p><p></p><p>width:60px;</p><p></p><p>height:10px;</p><p></p><p>content:'';</p><p></p><p>position:absolute;</p><p></p><p>z-index:7;</p><p></p><p>left:105px;</p><p></p><p>top:9px;</p><p></p><p>transform: rotate(13deg);</p><p></p><p>border-radius:100%</p><p></p><p>}</p><p></p><p>.ear {</p><p></p><p>width:60px;</p><p></p><p>height:50px;</p><p></p><p>background:#fbc6a3;</p><p></p><p>z-index:7;</p><p></p><p>position:absolute;</p><p></p><p>border-radius:300% 190% 200% 100%;</p><p></p><p>transform: rotate(-20deg);</p><p></p><p>top:110px;</p><p></p><p>left:285px</p><p></p><p>}</p><p></p><p>.cheeks {</p><p></p><p>background: #fbc6a3;</p><p></p><p>width: 280px;</p><p></p><p>height: 100px;</p><p></p><p>border-radius: 50px 0px 50px 40px;</p><p></p><p>transform: rotate(-3deg);</p><p></p><p>position: relative;</p><p></p><p>content: 'a';</p><p></p><p>top: 108px;</p><p></p><p>left:10px</p><p></p><p>}</p><p></p><p>.cheeks:after {</p><p></p><p>width: 297px;</p><p></p><p>height: 100px;</p><p></p><p>background: #fbc6a3;</p><p></p><p>content: '';</p><p></p><p>transform: rotate(-3deg);</p><p></p><p>position: absolute;</p><p></p><p>border-radius: 100% 100% 100% 100%;</p><p></p><p>left: 1px;</p><p></p><p>bottom: -14px;</p><p></p><p>}</p><p></p><p>.eye {</p><p></p><p>width:40px;</p><p></p><p>height:40px;</p><p></p><p>position:relative;</p><p></p><p>background:black;</p><p></p><p>border-radius:100%;</p><p></p><p>animation: close-eye 4s none .2s infinite;</p><p></p><p>}</p><p></p><p>.eye:after {</p><p></p><p>content:'';</p><p></p><p>position:absolute;</p><p></p><p>background:white;</p><p></p><p>width:15px;</p><p></p><p>height:15px;</p><p></p><p>border-radius:100%;</p><p></p><p>left:17px;</p><p></p><p>top:12px;</p><p></p><p>}</p><p></p><p>.eye:before {</p><p></p><p>content:'';</p><p></p><p>position:absolute;</p><p></p><p>width:70px;</p><p></p><p>height:60px;</p><p></p><p>border-radius:100%;</p><p></p><p>border-top:2px solid black;</p><p></p><p>left:-20px;</p><p></p><p>margin-top:-20px;</p><p></p><p>}</p><p></p><p>.eye.left,.eye.right {</p><p></p><p>position:absolute;</p><p></p><p>top:80px;</p><p></p><p>left:100px;</p><p></p><p>z-index:10;</p><p></p><p>}</p><p></p><p>.eye.right {</p><p></p><p>left:190px;</p><p></p><p>top:90px;</p><p></p><p>}</p><p></p><p>.eyebrow {</p><p></p><p>animation: eyebroani 2s linear .2s infinite;</p><p></p><p>}</p><p></p><p>.eyebrow,.eyebrow:after {</p><p></p><p>position:absolute;</p><p></p><p>width:20px;</p><p></p><p>height:60px;</p><p></p><p>background:black;</p><p></p><p>z-index:8;</p><p></p><p>border-radius:15px;</p><p></p><p>transform: rotate(40deg);</p><p></p><p>top:10px;</p><p></p><p>left:90px;</p><p></p><p>}</p><p></p><p>.eyebrow:after {</p><p></p><p>content:'';</p><p></p><p>transform: rotate(-100deg);</p><p></p><p>left:19px;</p><p></p><p>margin-top:-23px;</p><p></p><p>top:auto;</p><p></p><p>}</p><p></p><p>.eyebrow.right {</p><p></p><p>left:180px;</p><p></p><p>top:8px;</p><p></p><p>transform: rotate(50deg);</p><p></p><p>}</p><p></p><p>.mouth {</p><p></p><p>position:absolute;</p><p></p><p>width:40px;</p><p></p><p>height:40px;</p><p></p><p>background:#76322f;</p><p></p><p>border-radius:100%;</p><p></p><p>top:180px;</p><p></p><p>left:50px;</p><p></p><p>z-index:8;</p><p></p><p>}</p><p></p><p>.shy {</p><p></p><p>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;}}&lt;/style&gt;&lt;/body&gt;&lt;/html&gt;

&lt;marquee direction="up"&gt;⬆️⬆️⬆️⬆️

&lt;marquee&gt;Hello&lt;/marquee&gt;

&lt;body bgcolor=black&gt;\large\orange{</p><p>I \ hope \  it's \ helps \ you}&lt;font color=gold&gt;

Similar questions