Я решила, что вообще ничего не буду ждать. Ничего и никого. Мне и так хорошо. Без всех. Просто жить. Просто для себя. Просто в свое удовольствие. То, что суждено, придет само.
26-августа-2023, 18:01 25 0
Грустный котик который моргает создан с применением html и css. В CSS применены radial-gradient и conic-gradient градиенты. Котика можно использовать в качестве украшения для сайта или блога. Установка займёт пару минут.
HTML
<div class="sad-cat-block">
<div class="sad-cat"></div>
</div>
CSS
.sad-cat-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.sad-cat {
background: radial-gradient(0.5em 2em at 9em 16.5em, #100202 45%, rgba(16, 2, 2, 0) 50%), radial-gradient(5em 4em at 9em 16.5em, #96c8e6 39%, #78aac8 40%, #78aac8 49%, rgba(120, 170, 200, 0) 50%), radial-gradient(0.5em 2em at 21em 16.5em, #100202 45%, rgba(16, 2, 2, 0) 50%), radial-gradient(5em 4em at 21em 16.5em, #96c8e6 39%, #78aac8 40%, #78aac8 49%, rgba(120, 170, 200, 0) 50%), radial-gradient(200% 100% at 80% 0%, rgba(236, 236, 236, 0) 48%, #ececec 48.5%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 2em 16.5em / 9em 10em, radial-gradient(200% 100% at 20% 0%, rgba(236, 236, 236, 0) 48%, #ececec 48.5%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 19em 16.5em / 9em 10em, radial-gradient(200% 100% at 50% 100%, rgba(236, 236, 236, 0) 46%, #ececec 47%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 1em 19.75em / 10em 4em, radial-gradient(200% 100% at 50% 100%, rgba(236, 236, 236, 0) 46%, #ececec 47%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 19em 19.75em / 10em 4em, radial-gradient(200% 100% at 80% 100%, rgba(236, 236, 236, 0) 46%, #ececec 47%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 1em 20.5em / 10em 4em, radial-gradient(200% 100% at 20% 100%, rgba(236, 236, 236, 0) 46%, #ececec 47%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 19em 20.5em / 10em 4em, radial-gradient(200% 100% at 90% 100%, rgba(236, 236, 236, 0) 47%, #ececec 48%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 2em 21em / 9em 4em, radial-gradient(200% 100% at 10% 100%, rgba(236, 236, 236, 0) 47%, #ececec 48%, #ececec 49%, rgba(236, 236, 236, 0) 50%) 18em 21em / 9em 4em, radial-gradient(3em 1.5em at 50% 20.5em, #f88799 49%, rgba(248, 135, 153, 0) 50%), radial-gradient(1em 1em at 50% 21.25em, #f88799 49%, rgba(248, 135, 153, 0) 50%), radial-gradient(1em 0.75em at 14.4em 21em, #100202 49%, rgba(16, 2, 2, 0) 50%), radial-gradient(1em 0.75em at 15.6em 21em, #100202 49%, rgba(16, 2, 2, 0) 50%), radial-gradient(5em 2.6em at 50% 23.5em, #ececec 49%, rgba(236, 236, 236, 0) 50%), radial-gradient(3.5em 2.5em at 50% 23.3em, #f88799 49%, rgba(248, 135, 153, 0) 50%), radial-gradient(5em 2.75em at 50% 23.4em, #100202 49%, rgba(16, 2, 2, 0) 50%), radial-gradient(0.3em 1em at 50% 22em, #100202 49%, rgba(16, 2, 2, 0) 50%), radial-gradient(10em 5.5em at 50% 22.3em, #ececec 49%, rgba(236, 236, 236, 0) 50%), radial-gradient(200% 200% at 0 0, #736050 49.5%, rgba(115, 96, 80, 0) 50%) 3.5em 10em / 9em 4em, radial-gradient(200% 200% at 100% 0, #736050 49.5%, rgba(115, 96, 80, 0) 50%) 17.5em 10em / 9em 4em, radial-gradient(10em 12em at 9em 16em, #4b4035 49.5%, rgba(75, 64, 53, 0) 50%), radial-gradient(10em 12em at 21em 16em, #4b4035 49.5%, rgba(75, 64, 53, 0) 50%), radial-gradient(12em 16em at 8em 15em, #736050 49.5%, rgba(115, 96, 80, 0) 50%), radial-gradient(12em 16em at 22em 15em, #736050 49.5%, rgba(115, 96, 80, 0) 50%), radial-gradient(100% 200% at 50% 0, #736050 49.5%, rgba(115, 96, 80, 0) 50%) 50% 21em / 20.5em 4em, radial-gradient(26em 20em at 50% 15em, #ececec 49.5%, rgba(236, 236, 236, 0) 50%), conic-gradient(rgba(75, 64, 53, 0) 34%, #4b4035 0 43%, #ececec 0 44.8%, rgba(236, 236, 236, 0) 0) -10em -10em / 20em 20em, conic-gradient(rgba(236, 236, 236, 0) 55.2%, #ececec 0 57%, #4b4035 0 66%, rgba(75, 64, 53, 0) 0) 20em -10em / 20em 20em;
background-repeat: no-repeat;
border-radius: 3em 3em 0 0 / 2em 2em 0 0;
font-size: 10px;
position: relative;
width: 30em;
height: 25em;
}
.sad-cat:before, .sad-cat:after {
animation: blink 3s linear infinite;
background-repeat: no-repeat;
border-radius: 50%;
content: "";
display: block;
position: absolute;
top: 14.5em;
width: 5em;
height: 4em;
}
.sad-cat:before {
background-image: radial-gradient(200% 105% at 75% 50%, #4b4035 49%, rgba(75, 64, 53, 0) 50%);
background-position: 0 -2em;
left: 6.5em;
}
.sad-cat:after {
background-image: radial-gradient(200% 105% at 25% 50%, #4b4035 49%, rgba(75, 64, 53, 0) 50%);
background-position: 0 -2em;
right: 6.5em;
}
@keyframes blink {
from, 40%, 60%, to {
background-position: 0 -2em;
}
50% {
background-position: 0 0;
}
}