Art, asked by mohitgurjar5935, 10 months ago

please tell me how to make shinchan animation on Brainly or any other twinkling light animation.
and also give me the format .
I mark that ANSWER as BRAINLIEST and also give 50 thanks.

please DON'T spam me​

Answers

Answered by Anonymous
3

&lt;!DOCTYPE html&gt;</p><p></p><p>&lt;html lang="en"&gt;</p><p></p><p>&lt;head&gt;</p><p></p><p>&lt;title&gt;Cat in night&lt;/title&gt;</p><p></p><p>&lt;/head&gt;</p><p></p><p>&lt;body&gt;</p><p></p><p>&lt;div id="wrapper"&gt;</p><p></p><p>&lt;section class="sky"&gt;</p><p></p><p>&lt;div class="moon"&gt;&lt;/div&gt;</p><p></p><p>&lt;ul&gt;</p><p></p><p>&lt;li class="cloud"&gt;&lt;/li&gt;</p><p></p><p>&lt;li class="cloud"&gt;&lt;/li&gt;</p><p></p><p>&lt;li class="cloud"&gt;&lt;/li&gt;</p><p></p><p>&lt;/ul&gt;</p><p></p><p>&lt;/section&gt;</p><p></p><p>&lt;section class="wall"&gt;</p><p></p><p>&lt;section class="cat"&gt;</p><p></p><p>&lt;div class="cat-head"&gt;</p><p></p><p>&lt;div class="eyes"&gt;</p><p></p><p>&lt;div class="eye"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="eye"&gt;&lt;/div&gt;</p><p></p><p>&lt;/div&gt;</p><p></p><p>&lt;/div&gt;</p><p></p><p>&lt;div class="cat-body"&gt;</p><p></p><p>&lt;div class="tail"&gt;&lt;/div&gt;</p><p></p><p>&lt;/div&gt;</p><p></p><p>&lt;/section&gt;</p><p></p><p>&lt;/section&gt;</p><p></p><p>&lt;/div&gt;</p><p></p><p>&lt;style&gt;</p><p></p><p>.sky {</p><p></p><p>height: 300px;</p><p></p><p>background: radial-gradient(#112A71, #000A31);</p><p></p><p>overflow: hidden;</p><p></p><p>position: relative; }</p><p></p><p>.sky .moon {</p><p></p><p>width: 80px;</p><p></p><p>height: 80px;</p><p></p><p>border-radius: 50%;</p><p></p><p>background-color: #FEFF79;</p><p></p><p>-webkit-box-shadow: 0 0 150px #FEFF79, inset 0 1px 20px rgba(0, 0, 0, 0.3);</p><p></p><p>box-shadow: 0 0 150px #FEFF79, inset 0 1px 20px rgba(0, 0, 0, 0.3);</p><p></p><p>position: absolute;</p><p></p><p>top: 30px;</p><p></p><p>right: 100px; }</p><p></p><p>.sky .cloud {</p><p></p><p>width: 80px;</p><p></p><p>height: 30px;</p><p></p><p>background-color: #8D8D8D;</p><p></p><p>border-radius: 50px;</p><p></p><p>-webkit-box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.3);</p><p></p><p>box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.3);</p><p></p><p>position: relative;</p><p></p><p>top: 60px;</p><p></p><p>left: 30px;</p><p></p><p>-webkit-animation: shift 100s infinite linear;</p><p></p><p>animation: shift 100s infinite linear; }</p><p></p><p>.sky .cloud:nth-child(2) {</p><p></p><p>-webkit-transform: scale(-1.5, 1.3);</p><p></p><p>transform: scale(-1.5, 1.3);</p><p></p><p>top: 100px;</p><p></p><p>left: 250px;</p><p></p><p>-webkit-animation-duration: 40s;</p><p></p><p>animation-duration: 40s; }</p><p></p><p>.sky .cloud:last-child {</p><p></p><p>top: 150px;</p><p></p><p>left: 100px;</p><p></p><p>-webkit-transform: scale(2);</p><p></p><p>transform: scale(2);</p><p></p><p>-webkit-animation-duration: 60s;</p><p></p><p>animation-duration: 60s; }</p><p></p><p>.sky .cloud::before, .sky .cloud::after {</p><p></p><p>content: '';</p><p></p><p>display: block;</p><p></p><p>width: 32px;</p><p></p><p>height: 30px;</p><p></p><p>background-color: inherit;</p><p></p><p>border-radius: 50%;</p><p></p><p>position: relative;</p><p></p><p>top: -15px;</p><p></p><p>left: 35px; }</p><p></p><p>.sky .cloud::after {</p><p></p><p>top: -40px;</p><p></p><p>left: 10px; }</p><p></p><p>@-webkit-keyframes shift {</p><p></p><p>0% {</p><p></p><p>margin-left: -500px; }</p><p></p><p>100% {</p><p></p><p>margin-left: 100%; } }</p><p></p><p>@keyframes shift {</p><p></p><p>0% {</p><p></p><p>margin-left: -500px; }</p><p></p><p>100% {</p><p></p><p>margin-left: 100%; } }</p><p></p><p>.wall {</p><p></p><p>height: 250px;</p><p></p><p>background: radial-gradient(ellipse at top, #000C23, #000000);</p><p></p><p>position: relative;</p><p></p><p>top: 0px; }</p><p></p><p>.wall .cat {</p><p></p><p>position: absolute;</p><p></p><p>top: -105px;</p><p></p><p>left: 90px; }</p><p></p><p>.cat-head {</p><p></p><p>width: 40px;</p><p></p><p>height: 40px;</p><p></p><p>background-color: #131313;</p><p></p><p>border-radius: 50% 50% 100% 100%;</p><p></p><p>position: relative; }</p><p></p><p>.cat-head::before, .cat-head::after {</p><p></p><p>width: 6px;</p><p></p><p>height: 2px;</p><p></p><p>content: '';</p><p></p><p>background-color: inherit;</p><p></p><p>border-radius: 5% 100% 0 0;</p><p></p><p>border-top: 10px solid #131313;</p><p></p><p>border-left: 4px solid #141414;</p><p></p><p>position: absolute;</p><p></p><p>-webkit-transform: rotate(-5deg);</p><p></p><p>transform: rotate(-5deg);</p><p></p><p>top: -6px;</p><p></p><p>left: 0px;</p><p></p><p>z-index: 2; }</p><p></p><p>.cat-head::after {</p><p></p><p>left: auto;</p><p></p><p>right: 0px;</p><p></p><p>-webkit-transform: scaleX(-1) rotate(-5deg);</p><p></p><p>transform: scaleX(-1) rotate(-5deg);</p><p></p><p>-webkit-animation: wiggle 3s ease-in infinite;</p><p></p><p>animation: wiggle 3s ease-in infinite; }</p><p></p><p>.cat-head .eyes {</p><p></p><p>height: 30px;</p><p></p><p>display: -webkit-box;</p><p></p><p>display: -ms-flexbox;</p><p></p><p>display: flex;</p><p></p><p>-ms-flex-pack: distribute;</p><p></p><p>justify-content: space-around;</p><p></p><p>-webkit-box-align: center;</p><p></p><p>-ms-flex-align: center;</p><p></p><p>align-items: center; }</p><p></p><p>.cat-head .eyes .eye {</p><p></p><p>width: 6px;</p><p></p><p>height: 6px;</p><p></p><p>background-color: #4C4C4C;</p><p></p><p>border-radius: 50%;</p><p></p><p>-webkit-box-shadow: 0 0 0 3px #00D382;</p><p></p><p>box-shadow: 0 0 0 3px #00D382;</p><p></p><p>z-index: 5;</p><p></p><p>position: relative;</p><p></p><p>-webkit-animation: blink 3s ease-out infinite;</p><p></p><p>animation: blink 3s ease-out infinite; }</p><p></p><p>.cat-head .eyes .eye::after {</p><p></p><p>content: '';</p><p></p><p>width: 2px;</p><p></p><p>height: 2px;</p><p></p><p>background-color: #FFDFDF;</p><p></p><p>border-radius: 50%;</p><p></p><p>position: absolute;</p><p></p><p>top: 0px;</p><p></p><p>left: 3px; }</p><p></p><p>.cat-head .eyes .eye:last-child {</p><p></p><p>-webkit-transform: scaleX(-1);</p><p></p><p>transform: scaleX(-1); }</p><p></p><p>.cat-head .eyes .eye:last-child::after {</p><p></p><p>left: auto;</p><p></p><p>right: 3px; }</p><p></p><p>.cat-body {</p><p></p><p>height: 80px;</p><p></p><p>width: 38px;</p><p></p><p>background: #131313;</p><p></p><p>border-radius: 100% 100% 70% 70%;</p><p></p><p>position: relative;</p><p></p><p>top: -12px; }</p><p></p><p>.cat-body .tail {</p><p></p><p>width: 40px;</p><p></p><p>height: 10px;</p><p></p><p>background-color: transparent;</p><p></p><p>border-radius: 50%;</p><p></p><p>border: 8px solid #131313;</p><p></p><p>border-left-color: transparent;</p><p></p><p>border-top-color: transparent;</p><p></p><p>position: absolute;</p><p></p><p>bottom: 0px;</p><p></p><p>left: 5px; }</p><p></p><p>.cat-body .tail::after {</p><p></p><p>content: '';</p><p></p><p>width: 9px;</p><p></p><p>height: 10px;</p><p></p><p>background-color: #131313;</p><p></p><p>position: absolute;</p><p></p><p>right: -5px;</p><p></p><p>border-radius: 50%;</p><p></p><p>top: -4px;</p><p></p><p>-webkit-transform: skew(44deg, -26deg);</p><p></p><p>transform: skew(44deg, -26deg); }</p><p></p><p>@-webkit-keyframes blink {</p><p></p><p>78%, 82%, 86%, 90% {</p><p></p><p>opacity: 1; }</p><p></p><p>80%, 88% {</p><p></p><p>opacity: 0; } }</p><p></p><p>@keyframes blink {</p><p></p><p>78%, 82%, 86%, 90% {</p><p></p><p>opacity: 1; }</p><p></p><p>80%, 88% {</p><p></p><p>opacity: 0; } }</p><p></p><p>@-webkit-keyframes wiggle {</p><p></p><p>50%, 60% {</p><p></p><p>-webkit-transform: scaleX(-1) rotate(-5deg);</p><p></p><p>transform: scaleX(-1) rotate(-5deg); }</p><p></p><p>55% {</p><p></p><p>-webkit-transform: scaleX(-1) rotate(-30deg);</p><p></p><p>transform: scaleX(-1) rotate(-30deg); } }</p><p></p><p>@keyframes wiggle {</p><p></p><p>50%, 60% {</p><p></p><p>-webkit-transform: scaleX(-1) rotate(-5deg);</p><p></p><p>transform: scaleX(-1) rotate(-5deg); }</p><p></p><p>55% {</p><p></p><p>-webkit-transform: scaleX(-1) rotate(-30deg);</p><p></p><p>transform: scaleX(-1) rotate(-30deg); } }</p><p></p><p>* {</p><p></p><p>padding: 0;</p><p></p><p>margin: 0; }</p><p></p><p>ul {</p><p></p><p>list-style-type: none; }</p><p></p><p>body {</p><p></p><p>background: #1e1e1e;</p><p></p><p>}</p><p></p><p>#wrapper {</p><p></p><p>max-width: 400px;</p><p></p><p>margin: 0 auto;</p><p></p><p>height: 100vh; }</p><p></p><p>&lt;/style&gt;</p><p></p><p>&lt;/body&gt;</p><p></p><p>&lt;/html&gt;

Answered by nagarlavish2005
6

</p><p>&lt;!DOCTYPE html&gt;</p><p></p><p>&lt;html lang="en"&gt;</p><p></p><p>&lt;head&gt;</p><p></p><p>&lt;title&gt;Shinchan&lt;/title&gt;</p><p></p><p>&lt;/head&gt;</p><p></p><p>&lt;body&gt;</p><p></p><p>&lt;div class="face"&gt;</p><p></p><p>&lt;div class="forhead"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="cheeks"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="ear"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="eyebrow left"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="eyebrow right"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="eye left"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="eye right"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="mouth"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="shy"&gt;&lt;/div&gt;</p><p></p><p>&lt;div class="shy right"&gt;&lt;/div&gt;</p><p></p><p>&lt;/div&gt;</p><p></p><p>&lt;style&gt;</p><p></p><p>body {</p><p></p><p>background:#FF0000</p><p></p><p>}</p><p></p><p>.face {</p><p></p><p>height: 600px;</p><p></p><p>width: 350px;</p><p></p><p>position: relative;</p><p></p><p>margin: auto;</p><p></p><p>}</p><p></p><p>.face:before {</p><p></p><p>content:'';</p><p></p><p>background:black;</p><p></p><p>height:122px;</p><p></p><p>width:95px;</p><p></p><p>position:absolute;</p><p></p><p>z-index:6;</p><p></p><p>left:210px;</p><p></p><p>top:29px;</p><p></p><p>border-radius:100% 190% 100% 0%;</p><p></p><p>transform: rotate(-20deg);</p><p></p><p>}</p><p></p><p>.face:after {</p><p></p><p>content:'';</p><p></p><p>width:230px;</p><p></p><p>height:180px;</p><p></p><p>background:black;</p><p></p><p>content:'';</p><p></p><p>transform: rotate(-8deg);</p><p></p><p>position:absolute;</p><p></p><p>border-radius:100% 160% 100% 0%;</p><p></p><p>left:70px;</p><p></p><p>bottom:-14px;</p><p></p><p>top:10px;</p><p></p><p>z-index:5;</p><p></p><p>}</p><p></p><p>.forhead, .forhead:after {</p><p></p><p>content: '';</p><p></p><p>width: 220px;</p><p></p><p>height: 181px;</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: 60% 120% 50% 0%;</p><p></p><p>left: 67px;</p><p></p><p>bottom: -14px;</p><p></p><p>top: 21px;</p><p></p><p>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;</p><p></p><p>width:0px;</p><p></p><p>height:0px;</p><p></p><p>border-radius:100%;</p><p></p><p>opacity:0;</p><p></p><p>box-shadow: 0px 0px 40px 20px red;</p><p></p><p>z-index:8;</p><p></p><p>left:35px;</p><p></p><p>top:160px;</p><p></p><p>animation: shy 10s linear .2s infinite;</p><p></p><p>}</p><p></p><p>.shy.right {</p><p></p><p>left:170px;</p><p></p><p>top:180px;</p><p></p><p>}</p><p></p><p>@keyframes eyebroani {</p><p></p><p>0% {margin-top:auto}</p><p></p><p>10% {margin-top:-10px}</p><p></p><p>20% {margin-top:auto}</p><p></p><p>30% {margin-top:-10px}</p><p></p><p>40% {margin-top:auto}</p><p></p><p>100% {margin-top:auto}</p><p></p><p>}</p><p></p><p>@keyframes shy {</p><p></p><p>0% {opacity:0}</p><p></p><p></p><p>90% {opacity:0.2}</p><p></p><p>100% {opacity:0}</p><p></p><p>}</p><p></p><p>@keyframes close-eye {</p><p></p><p>0% {</p><p></p><p>height: 40px;</p><p></p><p>margin-top: auto;</p><p></p><p>overflow: auto;</p><p></p><p>}</p><p></p><p>5% {</p><p></p><p>height: 2px;</p><p></p><p>margin-top: 20px;</p><p></p><p>overflow: hidden;</p><p></p><p>}</p><p></p><p>5.1% {</p><p></p><p>height: 40px;</p><p></p><p>margin-top:0;</p><p></p><p>overflow:visible;</p><p></p><p>}</p><p></p><p>}</p><p></p><p>&lt;/style&gt;</p><p></p><p>&lt;/body&gt;</p><p></p><p>&lt;/html&gt;</p><p>

Previous Question
Next Question
Similar questions
Physics, 4 months ago
What happens if we do not reduce friction in machines ?​
Math, 4 months ago
Express 6 3/5% as fraction step by step...
Physics, 4 months ago
and answer the questions below. A particle is moving with uniform acceleration Its velocity after 5 sec 25 ms-1 and after & 8 sec is 34 ms-1 Acceleration of the particle is a)3/2ms -2 b) 3 ms-2 c) 6 ms-2 d) 9ms-2​...
Math, 10 months ago
\sqrt{ - 1} \times \sqrt{ - 1} = {?} ​...
Chemistry, 10 months ago
M Number of atoms present in one molecule of an element is called a) Atomicity b) Molecule c) Element​...
Math, 1 year ago
explain about a quadrilateral and it's properties in Hindi nice answer no spam ​...
Chemistry, 1 year ago
a strip of copper metal is plaxed in a solution of silver nitrate ,metalic silver is precipicated and a solution containing copper nitrate is form​...
Science, 1 year ago
What role de alge and fungus play in lichen? Explain.​