KeshavAnandCode/FTCWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance the website with a visually appealing custom dot cursor effect

Browse Source 
Update static/css/styles.css to modify the .dot-cursor class, increasing its size to 12px, adding a box-shadow for a glow effect, and adjusting the hover state's scale and background color.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 75bceff7-98f2-4f6e-ae8e-e735399a1fe8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9cb2a35e-1acb-4454-b7ee-eafa4a1d3e63
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/75bceff7-98f2-4f6e-ae8e-e735399a1fe8/jujGW7M
This commit is contained in:
abhiramtx
2025-11-09 00:36:08 +00:00
parent 3a35794c29
commit 3f2bc103c1
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/css/styles.css
View File

@@ -37,19 +37,21 @@ body {
.dot-cursor { .dot-cursor {
position: fixed; position: fixed;
width: 8px; width: 12px;
height: 8px; height: 12px;
background: #3b82f6; background: #3b82f6;
border-radius: 50%; border-radius: 50%;
pointer-events: none; pointer-events: none;
z-index: 999999; z-index: 999999;
transition: transform 0.15s ease, background 0.2s ease; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
will-change: transform; will-change: transform;
box-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.3);
} }
.dot-cursor.hover { .dot-cursor.hover {
transform: scale(1.5); transform: scale(2);
background: #60a5fa; background: #60a5fa;
box-shadow: 0 0 25px rgba(96, 165, 250, 0.8), 0 0 50px rgba(96, 165, 250, 0.5);
} }
@media (max-width: 768px) { @media (max-width: 768px) {