Merhaha Youtube'de Gezerken Karşıma Bir Video Çıktı Merakım oldugu için Açtım İzledim Hoşuma gitti beğendim Webtasarım Hakkında Biraz Bilgim var Kod Yazma Bilgim Yok bende Benzete Bildiğim kadar Benzetmeye Çalıştım isteyen kullana Bilir
<!DOCTYPE html>
<html lang="en" dir="ltr">
<link rel="stylesheet" href="Styles.css">
<head>
<meta charset="utf-8">
<title>Saat HTML Tasarım</title>
</head>
<body>
<div class="circle">
<ul>
<li style="--i:-4;"><span>♣️</span></li>
<li style="--i:-3;"><span>T</span></li>
<li style="--i:-2;"><span>ü</span></li>
<li style="--i:-1;"><span>r</span></li>
<li style="--i:0;"><span>k</span></li>
<li style="--i:1;"><span>i</span></li>
<li style="--i:2;"><span>y</span></li>
<li style="--i:3;"><span>e</span></li>
<li style="--i:4;"><span>♣️</span></li>
<li style="--i:5;"><span>e</span></li>
<li style="--i:6;"><span>e</span></li>
<li style="--i:7;"><span>y</span></li>
<li style="--i:8;"><span>i</span></li>
<li style="--i:9;"><span>k</span></li>
<li style="--i:10;"><span>r</span></li>
<li style="--i:11;"><span>ü</span></li>
<li style="--i:12;"><span>T</span></li>
</ul>
</div>
</body>
</html>*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
}
body::before
{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(#830505,#ffffff);
z-index: 10;
pointer-events: none;
mix-blend-mode: multiply;
}
.circle
{
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0.05);
border-radius: 50%;
box-shadow: 0 0 0 2px #fff,
0 0 0 20px #333,
0 0 0 22px #fff,
0 0 50px #fff,
0 0 750px #fff;
}
.circle::before
{
content: '';
position: absolute;
width: 2px;
height: 170px;
border-radius: 2px;
background: linear-gradient(0deg,transparent,#fff);
transform-origin: bottom;
animation: animateNiddles 20s steps(60) infinite;
}
.circle::after
{
content: '';
position: absolute;
width: 4px;
height: 130px;
border-radius: 2px;
background: linear-gradient(0deg,transparent,#fff);
transform-origin: bottom;
animation: animateNiddles 120s steps(60) infinite;
}
@keyframes animateNiddles
{
0%
{
transform: translate(-50%, -50%) rotate(0deg);
}
100%
{
transform: translate(-50%, -50%) rotate(360deg);
}
}
ul li
{
position: absolute;
top: 10px;
list-style: none;
transform-origin: 0 240px;
transform: rotate(calc(21deg * var(--i)));
font-size: 2.5em;
font-weight: bold;
text-transform: uppercase;
font-family: consolas;
}
ul li span
{
display: inline-block;
color: #fff;
transform: rotate(calc(-21deg * var(--i)));
text-shadow: 0 0 15px #fff,
0 0 35px #fff,
0 0 75px #fff,
0 0 150px #fff;
}