Science, asked by Glance, 1 year ago

How to see cat in dark night??

Answers

Answered by arvind155415
0

Answer:

Cats can't see in the dark, but they can detect light 7 times dimmer than humans. Cats can see in the ultraviolet range, which appears dark to humans. In order to see in dim light, cats have more rods than cones. They sacrifice color vision for improved night vision.

Explanation:

Answered by krishna02299
5

&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 {height: 300px; background: radial-gradient(#112A71, #000A31); overflow: hidden;position: relative; }</p><p></p><p>.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; }</p><p></p><p>.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; }</p><p></p><p>.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; }</p><p></p><p>.sky .cloud:last-child { top: 150px; left: 100px; -webkit-transform: scale(2); transform: scale(2); -webkit-animation-duration: 60s; animation-duration: 60s; }</p><p></p><p>.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; }</p><p></p><p>.sky .cloud::after { top: -40px; left: 10px;}</p><p></p><p>@-webkit-keyframes shift {0% {margin-left: -500px;}100% {margin-left: 100%;}}</p><p></p><p>@keyframes shift {0% {margin-left: -500px;}100% {margin-left: 100%;}}</p><p></p><p>.wall {height: 250px; background: radial-gradient(ellipse at top, #000C23, #000000); position: relative; top: 0px; }</p><p></p><p>.wall .cat {position: absolute; top: -105px;left: 90px; }</p><p></p><p>.cat-head {width: 40px; height: 40px; background-color: #131313; border-radius: 50% 50% 100% 100%; position: relative; }</p><p></p><p>.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; }</p><p></p><p>.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; }</p><p></p><p>.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; }</p><p></p><p>.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;}</p><p></p><p>.cat-head .eyes .eye::after {content: ''; width: 2px; height: 2px; background-color: #FFDFDF; border-radius: 50%; position: absolute;top: 0px; left: 3px; }</p><p></p><p>.cat-head .eyes .eye:last-child {-webkit-transform: scaleX(-1); transform: scaleX(-1); }</p><p></p><p>.cat-head .eyes .eye:last-child::after {left: auto; right: 3px;}</p><p></p><p>.cat-body {height: 80px; width: 38px; background: #131313; border-radius: 100% 100% 70% 70%; position: relative; top: -12px;}</p><p></p><p>.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;}</p><p></p><p>.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); }</p><p></p><p>@-webkit-keyframes blink {78%, 82%, 86%, 90% {opacity: 1;}80%, 88% {opacity: 0;}}</p><p></p><p>@keyframes blink {78%, 82%, 86%, 90% {opacity: 1; }80%, 88% {opacity: 0;}}</p><p></p><p>@-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); } }</p><p></p><p>@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);}}</p><p></p><p>* {padding: 0;margin: 0; }ul {list-style-type: none; }body{background: #1e1e1e;}#wrapper {max-width: 400px; margin: 0 auto;height: 100vh;}</p><p></p><p>&lt;/style&gt;</p><p></p><p>&lt;/body&gt;</p><p></p><p>&lt;/html&gt;

Similar questions