<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09</title>
<style>
.cat {
position: relative;
height: 170px;
width: 192.1px;
}
.ear {
position: absolute;
top: -30%;
height: 60%;
width: 25%;
background: linear-gradient(135deg, #ff7f50, #ff4500);
box-shadow: 0 0 10px #ff4500;
}
.ear::before,
.ear::after {
content: "";
position: absolute;
bottom: 24%;
height: 10%;
width: 5%;
border-radius: 50%;
background: #1e1d0a;
}
.ear::after {
transform-origin: 50% 100%;
}
.ear--left {
left: -7%;
border-radius: 70% 30% 0% 0%/100% 100% 0% 0%;
transform: rotate(-15deg);
}
.ear--left::before,
.ear--left::after {
right: 10%;
}
.ear--left::after {
transform: rotate(-45deg);
}
.ear--right {
right: -7%;
border-radius: 30% 70% 0% 0%/100% 100% 0% 0%;
transform: rotate(15deg);
}
.ear--right::before,
.ear--right::after {
left: 10%;
}
.ear--right::after {
transform: rotate(45deg);
}
.face {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(135deg, ##1e1d0a, #00bfff, #ff7f50, #ff4500);
border-radius: 50%;
box-shadow: 0 0 15px #00bfff;
animation: glow 3s infinite alternate;
}
@keyframes glow {
0% {
box-shadow: 0 0 15px #00bfff;
}
100% {
box-shadow: 0 0 25px #00bfff;
}
}
.eye {
position: absolute;
top: 35%;
height: 30%;
width: 31%;
background: radial-gradient(circle, #fff 30%, ##00bfff 100%);
border-radius: 50%;
box-shadow: 0 0 10px #00bfff;
overflow: hidden;
/* Ensure the runes don't overflow */
}
.eye::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 0 0 50% 50%/0 0 40% 40%;
background: none;
/* Remove blinking background */
}
.eye::before {
content: "";
position: absolute;
top: 60%;
height: 10%;
width: 15%;
background: #fff;
border-radius: 50%;
}
.eye--left {
left: 0;
}
.eye--left::before {
right: -5%;
}
.eye--right {
right: 0;
}
.eye--right::before {
left: -5%;
}
.eye-rune {
position: absolute;
top: 25%;
left: 40%;
font-size: 2rem;
color: #ff1493;
animation: spin 4s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.muzzle {
position: absolute;
top: 60%;
left: 50%;
height: 6%;
width: 10%;
background: #fff;
transform: translateX(-50%);
border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
box-shadow: 0 0 10px #ff4500;
z-index: 1;
/* Ensures whiskers are over the muzzle */
}
.whisker {
position: absolute;
height: 2px;
background: none;
z-index: 2;
/* Ensures whiskers are over the muzzle */
}
.whisker svg {
position: absolute;
top: 0;
left: 0;
}
.whisker--left-1 {
top: 60%;
left: -20%;
}
.whisker--left-2 {
top: 63%;
left: -20%;
}
.whisker--left-3 {
top: 67%;
left: -20%;
}
.whisker--right-1 {
top: 60%;
right: 20%;
}
.whisker--right-2 {
top: 63%;
right: 20%;
}
.whisker--right-3 {
top: 67%;
right: 20%;
}
/* General page styling */
html {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, #1e1d0a, #FF4500, #FFD700, #FF6347);
}
</style>
</head>
<body>
<div class="cat">
<div class="ear ear--left"></div>
<div class="ear ear--right"></div>
<div class="face">
<div class="eye eye--left">
<div class="eye-rune">ᚹ</div>
</div>
<div class="eye eye--right">
<div class="eye-rune">ᛪ</div>
</div>
<div class="muzzle"></div>
<div class="whisker whisker--left-1">
<svg width="100" height="10">
<path d="M 0 5 Q 50 -5 100 5" stroke="#fff" fill="transparent" />
</svg>
</div>
<div class="whisker whisker--left-2">
<svg width="100" height="10">
<path d="M 0 5 Q 50 -5 100 5" stroke="#fff" fill="transparent" />
</svg>
</div>
<div class="whisker whisker--left-3">
<svg width="100" height="10">
<path d="M 0 5 Q 50 -5 100 5" stroke="#fff" fill="transparent" />
</svg>
</div>
<div class="whisker whisker--right-1">
<svg width="100" height="10">
<path d="M 100 5 Q 50 -5 0 5" stroke="#fff" fill="transparent" />
</svg>
</div>
<div class="whisker whisker--right-2">
<svg width="100" height="10">
<path d="M 100 5 Q 50 -5 0 5" stroke="#fff" fill="transparent" />
</svg>
</div>
<div class="whisker whisker--right-3">
<svg width="100" height="10">
<path d="M 100 5 Q 50 -5 0 5" stroke="#fff" fill="transparent" />
</svg>
</div>
</div>
</div>
</body>
</html>
No replies yet