Custom Code Experiment •
Nazar Boncuğu 2: CSS
Source Code View HTML / CSS / JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nazar Boncuğu 2: CSS</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{
background:#08011a;
display:flex;align-items:center;justify-content:center;
min-height:100vh;
}
.stage{
background:radial-gradient(ellipse at center, #160530 0%, #08011a 70%);
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:100vh;padding:50px 20px 60px;
overflow:hidden;position:relative;width:100%;
}
.eye-system{position:relative;width:280px;height:280px;}
.burst-ring{
position:absolute;inset:-36px;
border-radius:50%;
animation:spin-slow 30s linear infinite;
}
.burst-tri{
position:absolute;
width:0;height:0;
border-left:9px solid transparent;
border-right:9px solid transparent;
border-bottom:22px solid #c8a830;
transform-origin:9px 158px;
opacity:0.85;
}
.ring-1{
position:absolute;inset:0;border-radius:50%;
background:#13307a;
animation:pulse-ring1 2.8s ease-in-out infinite;
}
.ring-filigree{
position:absolute;inset:14px;border-radius:50%;
background:repeating-conic-gradient(#c8a830 0deg 6deg,#8a6e1a 6deg 12deg);
animation:spin-rev 18s linear infinite;
}
.ring-2{
position:absolute;inset:26px;border-radius:50%;
background:#e8e0cc;
}
.ring-pattern{
position:absolute;inset:54px;border-radius:50%;
background:repeating-conic-gradient(#c2b8a0 0deg 4deg,#e8e0cc 4deg 8deg);
}
.ring-3{
position:absolute;inset:68px;border-radius:50%;
background:#1e45b8;
}
.ring-4{
position:absolute;inset:96px;border-radius:50%;
background:#d4cfc5;
}
.ring-5{
position:absolute;inset:112px;border-radius:50%;
background:#0f2d99;
}
.pupil{
position:absolute;inset:132px;border-radius:50%;
background:#030510;
}
.pupil::before{
content:'';position:absolute;
top:12%;left:15%;width:32%;height:32%;
border-radius:50%;
background:rgba(255,255,255,0.6);
}
.pupil::after{
content:'';position:absolute;
bottom:18%;right:16%;width:14%;height:14%;
border-radius:50%;
background:rgba(255,255,255,0.25);
}
.lid-top{
position:absolute;inset:0;border-radius:50%;
background:#08011a;
clip-path:ellipse(50% 50% at 50% 0%);
transform-origin:50% 0%;
animation:blink-top 5s ease-in-out infinite;
z-index:10;
}
.lid-top::after{
content:'';
position:absolute;
bottom:0;left:10%;width:80%;height:18px;
background:repeating-linear-gradient(90deg,#08011a 0px,#08011a 3px,transparent 3px,transparent 9px);
border-radius:0 0 50% 50%;
}
.lid-bottom{
position:absolute;inset:0;border-radius:50%;
background:#08011a;
clip-path:ellipse(50% 50% at 50% 100%);
transform-origin:50% 100%;
animation:blink-bottom 5s ease-in-out infinite;
z-index:10;
}
.orbit-inner{
position:absolute;inset:-8px;border-radius:50%;
animation:spin-slow 12s linear infinite;
}
.orbit-outer{
position:absolute;inset:-22px;border-radius:50%;
animation:spin-rev 20s linear infinite;
}
.orb{
position:absolute;border-radius:50%;
transform-origin:var(--r) var(--r);
}
.rays{
position:absolute;inset:0;border-radius:50%;
animation:spin-slow 40s linear infinite;
z-index:-1;
}
.ray{
position:absolute;
top:50%;left:50%;
width:2px;height:140px;
background:linear-gradient(to bottom, rgba(200,168,48,0.35), transparent);
transform-origin:top center;
margin-left:-1px;
margin-top:0;
}
.teardrop{
position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);
width:22px;height:36px;
background:#13307a;
border-radius:50% 50% 60% 60%/40% 40% 60% 60%;
}
.teardrop::after{
content:'';
position:absolute;
top:6px;left:50%;transform:translateX(-50%);
width:10px;height:10px;border-radius:50%;
background:#c8a830;
}
.corner-eye{
position:absolute;width:14px;height:22px;
background:#13307a;
border-radius:50% 50% 60% 60%/40% 40% 60% 60%;
}
.corner-eye::after{
content:'';position:absolute;
top:4px;left:50%;transform:translateX(-50%);
width:6px;height:6px;border-radius:50%;
background:#e8e0cc;
}
.ce-tl{top:-30px;left:-30px;transform:rotate(-45deg);}
.ce-tr{top:-30px;right:-30px;transform:rotate(45deg);}
.ce-bl{bottom:-30px;left:-30px;transform:rotate(-135deg);}
.ce-br{bottom:-30px;right:-30px;transform:rotate(135deg);}
.nazar-label{
margin-top:68px;
font-family:Georgia,serif;
font-size:11px;letter-spacing:0.25em;
color:rgba(200,168,48,0.5);
text-transform:uppercase;
}
.nazar-sub{
margin-top:6px;
font-family:Georgia,serif;
font-size:10px;letter-spacing:0.12em;
color:rgba(180,160,220,0.35);
}
@keyframes blink-top{
0%,6%{transform:scaleY(0)}
10%,14%{transform:scaleY(1)}
18%,100%{transform:scaleY(0)}
}
@keyframes blink-bottom{
0%,6%{transform:scaleY(0)}
10%,14%{transform:scaleY(1)}
18%,100%{transform:scaleY(0)}
}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-rev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes pulse-ring1{
0%,100%{box-shadow:0 0 0 5px #0a1f5c,0 0 50px 10px rgba(19,48,122,0.7)}
50%{box-shadow:0 0 0 5px #0a1f5c,0 0 80px 22px rgba(30,69,184,0.9)}
}
</style>
</head>
<body>
<div class="stage">
<div class="eye-system">
<div class="rays">
<div class="ray" style="transform:rotate(0deg)"></div>
<div class="ray" style="transform:rotate(20deg)"></div>
<div class="ray" style="transform:rotate(40deg)"></div>
<div class="ray" style="transform:rotate(60deg)"></div>
<div class="ray" style="transform:rotate(80deg)"></div>
<div class="ray" style="transform:rotate(100deg)"></div>
<div class="ray" style="transform:rotate(120deg)"></div>
<div class="ray" style="transform:rotate(140deg)"></div>
<div class="ray" style="transform:rotate(160deg)"></div>
<div class="ray" style="transform:rotate(180deg)"></div>
<div class="ray" style="transform:rotate(200deg)"></div>
<div class="ray" style="transform:rotate(220deg)"></div>
<div class="ray" style="transform:rotate(240deg)"></div>
<div class="ray" style="transform:rotate(260deg)"></div>
<div class="ray" style="transform:rotate(280deg)"></div>
<div class="ray" style="transform:rotate(300deg)"></div>
<div class="ray" style="transform:rotate(320deg)"></div>
<div class="ray" style="transform:rotate(340deg)"></div>
</div>
<div class="burst-ring">
<div class="burst-tri" style="transform:rotate(0deg)"></div>
<div class="burst-tri" style="transform:rotate(15deg)"></div>
<div class="burst-tri" style="transform:rotate(30deg)"></div>
<div class="burst-tri" style="transform:rotate(45deg)"></div>
<div class="burst-tri" style="transform:rotate(60deg)"></div>
<div class="burst-tri" style="transform:rotate(75deg)"></div>
<div class="burst-tri" style="transform:rotate(90deg)"></div>
<div class="burst-tri" style="transform:rotate(105deg)"></div>
<div class="burst-tri" style="transform:rotate(120deg)"></div>
<div class="burst-tri" style="transform:rotate(135deg)"></div>
<div class="burst-tri" style="transform:rotate(150deg)"></div>
<div class="burst-tri" style="transform:rotate(165deg)"></div>
<div class="burst-tri" style="transform:rotate(180deg)"></div>
<div class="burst-tri" style="transform:rotate(195deg)"></div>
<div class="burst-tri" style="transform:rotate(210deg)"></div>
<div class="burst-tri" style="transform:rotate(225deg)"></div>
<div class="burst-tri" style="transform:rotate(240deg)"></div>
<div class="burst-tri" style="transform:rotate(255deg)"></div>
<div class="burst-tri" style="transform:rotate(270deg)"></div>
<div class="burst-tri" style="transform:rotate(285deg)"></div>
<div class="burst-tri" style="transform:rotate(300deg)"></div>
<div class="burst-tri" style="transform:rotate(315deg)"></div>
<div class="burst-tri" style="transform:rotate(330deg)"></div>
<div class="burst-tri" style="transform:rotate(345deg)"></div>
</div>
<div class="orbit-outer" style="--r:151px">
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(0deg) translateY(-151px)"></div>
<div class="orb" style="width:6px;height:6px;background:#e8e0cc;transform:rotate(24deg) translateY(-151px)"></div>
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(48deg) translateY(-151px)"></div>
<div class="orb" style="width:6px;height:6px;background:#e8e0cc;transform:rotate(72deg) translateY(-151px)"></div>
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(96deg) translateY(-151px)"></div>
<div class="orb" style="width:6px;height:6px;background:#e8e0cc;transform:rotate(120deg) translateY(-151px)"></div>
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(144deg) translateY(-151px)"></div>
<div class="orb" style="width:6px;height:6px;background:#e8e0cc;transform:rotate(168deg) translateY(-151px)"></div>
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(192deg) translateY(-151px)"></div>
<div class="orb" style="width:6px;height:6px;background:#e8e0cc;transform:rotate(216deg) translateY(-151px)"></div>
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(240deg) translateY(-151px)"></div>
<div class="orb" style="width:6px;height:6px;background:#e8e0cc;transform:rotate(264deg) translateY(-151px)"></div>
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(288deg) translateY(-151px)"></div>
<div class="orb" style="width:6px;height:6px;background:#e8e0cc;transform:rotate(312deg) translateY(-151px)"></div>
<div class="orb" style="width:9px;height:9px;background:#b8d4f5;transform:rotate(336deg) translateY(-151px)"></div>
</div>
<div class="ring-1"></div>
<div class="ring-filigree"></div>
<div class="ring-2"></div>
<div class="ring-pattern"></div>
<div class="ring-3"></div>
<div class="ring-4"></div>
<div class="ring-5"></div>
<div class="pupil"></div>
<div class="orbit-inner" style="--r:148px">
<div class="orb" style="width:7px;height:7px;background:#c8a830;transform:rotate(0deg) translateY(-148px)"></div>
<div class="orb" style="width:5px;height:5px;background:#e8c84a;transform:rotate(30deg) translateY(-148px)"></div>
<div class="orb" style="width:7px;height:7px;background:#c8a830;transform:rotate(60deg) translateY(-148px)"></div>
<div class="orb" style="width:5px;height:5px;background:#e8c84a;transform:rotate(90deg) translateY(-148px)"></div>
<div class="orb" style="width:7px;height:7px;background:#c8a830;transform:rotate(120deg) translateY(-148px)"></div>
<div class="orb" style="width:5px;height:5px;background:#e8c84a;transform:rotate(150deg) translateY(-148px)"></div>
<div class="orb" style="width:7px;height:7px;background:#c8a830;transform:rotate(180deg) translateY(-148px)"></div>
<div class="orb" style="width:5px;height:5px;background:#e8c84a;transform:rotate(210deg) translateY(-148px)"></div>
<div class="orb" style="width:7px;height:7px;background:#c8a830;transform:rotate(240deg) translateY(-148px)"></div>
<div class="orb" style="width:5px;height:5px;background:#e8c84a;transform:rotate(270deg) translateY(-148px)"></div>
<div class="orb" style="width:7px;height:7px;background:#c8a830;transform:rotate(300deg) translateY(-148px)"></div>
<div class="orb" style="width:5px;height:5px;background:#e8c84a;transform:rotate(330deg) translateY(-148px)"></div>
</div>
<div class="lid-top"></div>
<div class="lid-bottom"></div>
<div class="corner-eye ce-tl"></div>
<div class="corner-eye ce-tr"></div>
<div class="corner-eye ce-bl"></div>
<div class="corner-eye ce-br"></div>
<div class="teardrop"></div>
</div>
</div>
</body>
</html>