Skip to content

Commit 6305a36

Browse files
NSTKrishnaNSTKrishna
authored
Nst krishna circular text rotation (#3294)
* add movie icon * add Circular-Text-Rotation * Delete Art/NSTKrishna-Animated-Movie-Icons/index.html * Delete Art/NSTKrishna-Animated-Movie-Icons/meta.json * Delete Art/NSTKrishna-Animated-Movie-Icons/styles.css * Update index.html
1 parent 921ea17 commit 6305a36

3 files changed

Lines changed: 48 additions & 0 deletions

File tree

‎Art/NSTKrishna-Circular-Text-Rotation/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="Circular rotating text animation with CSS transforms." />
7+
<title>Circular Text Rotation</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
<body>
11+
<div class="circle" id="circle"></div>
12+
</body>
13+
</html>

‎Art/NSTKrishna-Circular-Text-Rotation/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "circular-text-rotation",
3+
"githubHandle": "NSTKrishna"
4+
}

‎Art/NSTKrishna-Circular-Text-Rotation/styles.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
body {
2+
background: #0d0d0d;
3+
color: #fff;
4+
height: 100vh;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
}
9+
10+
.circle {
11+
position: relative;
12+
width: 200px;
13+
height: 200px;
14+
border-radius: 50%;
15+
animation: rotate 10s linear infinite;
16+
}
17+
18+
.circle span {
19+
position: absolute;
20+
left: 50%;
21+
top: 50%;
22+
transform-origin: 0 100px;
23+
font-size: 18px;
24+
font-family: 'Poppins', sans-serif;
25+
letter-spacing: 2px;
26+
}
27+
28+
@keyframes rotate {
29+
0% { transform: rotate(0deg); }
30+
100% { transform: rotate(360deg); }
31+
}

0 commit comments

Comments
 (0)