SASS Clock

Developer
APinix
Size
2,755 Kb
Views
4,048
  1. SASS Clock Previews
  2. SASS Clock HTML Codes
  3. SASS Clock CSS Codes

How do I make an sass clock?

A SASS(y) Animated Clock. What is a sass clock? How do you make a sass clock? This script and codes were developed by APinix on 11 January 2023, Wednesday.

SASS Clock Previews
IQ Test

SASS Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SASS Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="timer"> <div class="circle bounce delay2"></div> <div class="circle ripple delay1"></div> <div class="circle ripple delay2"></div> </div>
</div>
</body>
</html>

SASS Clock - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box;
}
body,
html { background: #19A648; width: 100%; height: 100%; margin: 0; padding: 0;
}
.wrapper { width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.wrapper .timer { width: 100%; height: 100%;
}
.wrapper .timer:after, .wrapper .timer:before { position: absolute; content: ""; background-color: white;
}
.wrapper .timer:after { width: 40%; height: 12px; border-radius: 300px; top: calc(50% - 12px/2); left: calc(50% - 12px/2); transform: rotate(-90deg); transform-origin: 6px 6px; animation: pointer 1s linear infinite;
}
.wrapper .timer:before { width: 20%; height: 12px; border-radius: 300px; top: calc(50% - 12px/2); left: calc(50% - 12px/2); transform-origin: 6px 6px; animation: pointer 12s linear infinite;
}
.wrapper .timer .circle { width: 100%; height: 100%; background-color: transparent; border: 12px solid white; border-radius: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.wrapper .timer .circle.bounce { animation: bounce 3s linear infinite;
}
.wrapper .timer .circle.ripple { animation: ripple 3s linear infinite;
}
.wrapper .timer .circle.delay1 { animation-delay: 1s;
}
.wrapper .timer .circle.delay2 { animation-delay: 1.5s;
}
@keyframes bounce { 0% { transform: scale(1); } 5% { transform: scale(1.2); } 10% { transform: scale(0.8); } 15% { transform: scale(1); } 100% { transform: scale(1); }
}
@keyframes ripple { 0% { transform: scale(1); opacity: 1; } 20% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; }
}
@keyframes pointer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
SASS Clock - Script Codes
SASS Clock - Script Codes
Home Page Home
Developer APinix
Username aPinix
Uploaded January 11, 2023
Rating 3
Size 2,755 Kb
Views 4,048
Do you need developer help for SASS Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

APinix (aPinix) Script Codes
Name
Real Sass Line-Clamp
Guided Tour Tooltip
CSS Infinite 360
CSS Clock
Blur Hover Effect
Knob with Snap
Fire on Resize Finish
Wheel Menu
CSS Spinner
Schedule a notification
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!