CSS Alarm Clock

Developer
Joni Trythall
Size
3,302 Kb
Views
62,744
  1. CSS Alarm Clock Previews
  2. CSS Alarm Clock HTML Codes
  3. CSS Alarm Clock CSS Codes

How do I make an css alarm clock?

Wake up. What is a css alarm clock? How do you make a css alarm clock? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.

CSS Alarm Clock Previews
IQ Test

CSS Alarm Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Alarm Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="contain-clock"> <div class="face-1"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="center"></div> </div> <div class="face-2"> <div class="line"></div> <div class="line line-2"></div> <div class="line line-3"></div> <div class="line line-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> </div> <div class="arm"></div> <div class="arm arm-2"></div> <div class="bell"></div> <div class="bell bell-2"></div> <div class="hammer"></div> <div class="handle"></div>
</div>
</body>
</html>

CSS Alarm Clock - Script Codes CSS Codes

body { background: #8fd5d5;
}
.contain-clock { position: relative; margin: -75px auto; width: 155px; height: 200px; -webkit-animation: alarm-2 1ms infinite; animation: alarm-2 1ms infinite;
}
.face-1 { position: absolute; top: 23px; left: 23px; z-index: 3; background: white; border-radius: 50%; width: 109px; height: 109px;
}
.face-2 { position: relative; margin: 200px auto; z-index: 2; background: white; border: 15px solid #ed6e46; border-radius: 50%; width: 125px; height: 125px;
}
.line { position: absolute; left: 50%; margin-left: -3px; background: gray; width: 6px; height: 126px;
}
.line-2 { left: 63px; transform: rotate(90deg); -webkit-transform: rotate(90deg) translate3d(0, 0, 0);
}
.line-3 { margin-left: -1px; transform: rotate(30deg); -webkit-transform: rotate(30deg) translate3d(0, 0, 0); width: 2px;
}
.line-4 { margin-left: -1px; transform: rotate(-30deg); -webkit-transform: rotate(-30deg) translate3d(0, 0, 0); width: 2px;
}
.line-5 { margin-left: -1px; transform: rotate(60deg); -webkit-transform: rotate(60deg) translate3d(0, 0, 0); width: 2px;
}
.line-6 { margin-left: -1px; transform: rotate(-60deg); -webkit-transform: rotate(-60deg) translate3d(0, 0, 0); width: 2px;
}
.hour { position: absolute; top: 50%; left: 50%; z-index: 5; margin-left: -4px; background: #f8b65b; transform-origin: top; -webkit-transform-origin: top; transform: rotate(90deg); -webkit-transform: rotate(90deg); border-radius: 50px; width: 8px; height: 35px;
}
.minute { position: absolute; top: 5px; left: 55px; z-index: 3; margin-left: -4px; background: #f8b65b; border-radius: 50px; transform-origin: bottom; -webkit-transform-origin: bottom; width: 8px; height: 50px; animation: tick-tock 3600s steps(60, end) infinite; -webkit-animation: tick-tock 3600s steps(60, end) infinite;
}
.second { position: absolute; top: 5px; left: 56px; z-index: 5; margin-left: -2px; background: #333333; border-radius: 50px; transform-origin: bottom; -webkit-transform-origin: bottom; width: 2px; height: 50px; animation: tick-tock 60s steps(60, end) infinite; -webkit-animation: tick-tock 60s steps(60, end) infinite;
}
.center { position: absolute; top: 62px; z-index: 20; margin-top: -15px; left: 55px; margin-left: -8px; border-radius: 50%; background: #ed6e46; width: 16px; height: 16px;
}
.arm { position: absolute; top: -50px; left: 73px; z-index: 1; background: gray; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); border-radius: 50px; width: 10px; height: 230px;
}
.arm-2 { left: 71px; transform: rotate(30deg); -webkit-transform: rotate(30deg);
}
.bell { position: absolute; top: -30px; z-index: 2; background: #ed6e46; border-radius: 50% 50% 10% 10%; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); width: 65px; height: 35px;
}
.bell-2 { left: 90px; transform: rotate(30deg); -webkit-transform: rotate(30deg);
}
.hammer { position: absolute; top: -25px; left: 76px; z-index: 1; background: gray; width: 3px; height: 30px; -webkit-animation: alarm 8ms infinite; animation: alarm 8ms infinite;
}
.hammer:before { content: ''; display: block; position: absolute; left: -6px; background: gray; border-radius: 50px; width: 15px; height: 5px;
}
.handle { position: absolute; top: -68px; left: 32px; border: 8px solid gray; border-radius: 50px 50px 0 0; width: 75px; height: 30px;
}
.handle:after { content: ''; display: block; position: absolute; top: 26px; background: #8fd5d5; width: 75px; height: 15px;
}
@keyframes tick-tock { to { transform: rotate(360deg); }
}
@-webkit-keyframes tick-tock { to { -webkit-transform: rotate(360deg) translate3d(0, 0, 0); }
}
@-webkit-keyframes alarm { from { -webkit-transform-origin: bottom right; -webkit-transform: rotate(15deg); } to { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-15deg); }
}
@keyframes alarm { from { transform-origin: bottom right; transform: rotate(15deg); } to { transform-origin: bottom left; transform: rotate(-15deg); }
}
@-webkit-keyframes alarm-2 { from { -webkit-transform: rotate(1deg); } to { -webkit-transform: rotate(-1deg); }
}
@keyframes alarm-2 { from { transform: rotate(1deg); } to { transform: rotate(-1deg); }
}
CSS Alarm Clock - Script Codes
CSS Alarm Clock - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded October 02, 2022
Rating 4.5
Size 3,302 Kb
Views 62,744
Do you need developer help for CSS Alarm 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!

Joni Trythall (jonitrythall) Script Codes
Name
Nested Noodle Loader
Frosted Glass Quote
Animated Shopping Cart Icons
CSS Pencil Scoop Logo
Franklin The CSS Fish
Unite Loader
Weird Circle Loader
Bounce Delay Loader
Hinged Twitter Button
Flexbox Tinkering
Create amazing captions 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!