[tex]overflow:hidden;[tex] i had written this but nothing is happening plz tell me where to write this above code to create animated answers and question if someone knows
Answers
Explanation:
follow me plz
shandhana.......
copy paste this one fully and write [tex] at the starting and at the ending .....coz i hv written [tx]
[tx]<!DOCTYPE html>
<html lang="en">
<head>
<title>Cat in night</title>
</head>
<body>
<div id="wrapper">
<section class="sky">
<div class="moon"></div>
<ul>
<li class="cloud"></li>
<li class="cloud"></li>
<li class="cloud"></li>
</ul>
</section>
<section class="wall">
<section class="cat">
<div class="cat-head">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
</div>
<div class="cat-body">
<div class="tail"></div>
</div>
</section>
</section>
</div>
<style>
.sky {
height: 300px;
background: radial-gradient(#112A71, #000A31);
overflow: hidden;
position: relative; }
.sky .moon {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #FEFF79;
-webkit-box-shadow: 0 0 150px #FEFF79, inset 0 1px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 150px #FEFF79, inset 0 1px 20px rgba(0, 0, 0, 0.3);
position: absolute;
top: 30px;
right: 100px; }
.sky .cloud {
width: 80px;
height: 30px;
background-color: #8D8D8D;
border-radius: 50px;
-webkit-box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.3);
position: relative;
top: 60px;
left: 30px;
-webkit-animation: shift 100s infinite linear;
animation: shift 100s infinite linear; }
.sky .cloud:nth-child(2) {
-webkit-transform: scale(-1.5, 1.3);
transform: scale(-1.5, 1.3);
top: 100px;
left: 250px;
-webkit-animation-duration: 40s;
animation-duration: 40s; }
.sky .cloud:last-child {
top: 150px;
left: 100px;
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-duration: 60s;
animation-duration: 60s; }
.sky .cloud::before, .sky .cloud::after {
content: '';
display: block;
width: 32px;
height: 30px;
background-color: inherit;
border-radius: 50%;
position: relative;
top: -15px;
left: 35px; }
.sky .cloud::after {
top: -40px;
left: 10px; }
@-webkit-keyframes shift {
0% {
margin-left: -500px; }
100% {
margin-left: 100%; } }
@keyframes shift {
0% {
margin-left: -500px; }
100% {
margin-left: 100%; } }
.wall {
height: 250px;
background: radial-gradient(ellipse at top, #000C23, #000000);
position: relative;
top: 0px; }
.wall .cat {
position: absolute;
top: -105px;
left: 90px; }
.cat-head {
width: 40px;
height: 40px;
background-color: #131313;
border-radius: 50% 50% 100% 100%;
position: relative; }
.cat-head::before, .cat-head::after {
width: 6px;
height: 2px;
content: '';
background-color: inherit;
border-radius: 5% 100% 0 0;
border-top: 10px solid #131313;
border-left: 4px solid #141414;
position: absolute;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
top: -6px;
left: 0px;
z-index: 2; }
.cat-head::after {
left: auto;
right: 0px;
-webkit-transform: scaleX(-1) rotate(-5deg);
transform: scaleX(-1) rotate(-5deg);
-webkit-animation: wiggle 3s ease-in infinite;
animation: wiggle 3s ease-in infinite; }
.cat-head .eyes {
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.cat-head .eyes .eye {
width: 6px;
height: 6px;
background-color: #4C4C4C;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 3px #00D382;
box-shadow: 0 0 0 3px #00D382;
z-index: 5;
position: relative;
-webkit-animation: blink 3s ease-out infinite;
animation: blink 3s ease-out infinite; }
.cat-head .eyes .eye::after {
content: '';
width: 2px;
height: 2px;
background-color: #FFDFDF;
border-radius: 50%;
position: absolute;
top: 0px;
left: 3px; }
.cat-head .eyes .eye:last-child {
-webkit-transform: scaleX(-1);
transform: scaleX(-1); }
.cat-head .eyes .eye:last-child::after {
left: auto;
right: 3px; }
.cat-body {
height: 80px;
width: 38px;
background: #131313;
border-radius: 100% 100% 70% 70%;
position: relative;
top: -12px; }
.cat-body .tail {
width: 40px;
height: 10px;
background-color: transparent;
border-radius: 50%;
border: 8px solid #131313;
border-left-color: transparent;
border-top-color: transparent;
position: absolute;
bottom: 0px;
left: 5px; }
.cat-body .tail::after {
content: '';
width: 9px;
height: 10px;
background-color: #131313;
position: absolute;
right: -5px;
border-radius: 50%;
top: -4px;
-webkit-transform: skew(44deg, -26deg);
transform: skew(44deg, -26deg); }
@-webkit-keyframes blink {
78%, 82%, 86%, 90% {
opacity: 1; }
80%, 88% {
opacity: 0; } }
@keyframes blink {
78%, 82%, 86%, 90% {
opacity: 1; }
80%, 88% {
opacity: 0; } }
@-webkit-keyframes wiggle {
50%, 60% {
-webkit-transform: scaleX(-1) rotate(-5deg);
transform: scaleX(-1) rotate(-5deg); }
55% {
-webkit-transform: scaleX(-1) rotate(-30deg);
transform: scaleX(-1) rotate(-30deg); } }
@keyframes wiggle {
50%, 60% {
-webkit-transform: scaleX(-1) rotate(-5deg);
transform: scaleX(-1) rotate(-5deg); }
55% {
-webkit-transform: scaleX(-1) rotate(-30deg);
transform: scaleX(-1) rotate(-30deg); } }
* {
padding: 0;
margin: 0; }
ul {
list-style-type: none; }
body {
background: #1e1e1e;
}
#wrapper {
max-width: 400px;
margin: 0 auto;
height: 100vh; }
</style>
</body>
</html>[/tx]