Harmoniclock

Developer
Andy Vanee
Size
2,966 Kb
Views
38,456
  1. Harmoniclock Previews
  2. Harmoniclock HTML Codes
  3. Harmoniclock CSS Codes
  4. Harmoniclock JS Codes

How do I make an harmoniclock?

What is a harmoniclock? How do you make a harmoniclock? This script and codes were developed by Andy Vanee on 21 September 2022, Wednesday.

Harmoniclock Previews
IQ Test

Harmoniclock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Harmoniclock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1> Harmoniclock </h1> <div class="clock"> <div class="hand hand-1"></div> <div class="hand hand-2"></div> <div class="hand hand-3"></div> <div class="hand hand-4"></div> <div class="hand hand-5"></div> <div class="hand hand-6"></div> <div class="hand hand-7"></div> <div class="hand hand-8"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Harmoniclock - Script Codes CSS Codes

.container { max-width: 400px; margin: 0 auto;
}
@keyframes hand-rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); }
}
.clock { width: 400px; height: 400px; position: relative; margin: 2em auto;
}
.hand { width: 100%; height: 100%; position: absolute; transform-origin: center; animation-name: hand-rotate; animation-timing-function: linear; animation-iteration-count: infinite;
}
.hand:after { color: white; text-align: center; width: 16px; height: 16px; padding: 16px 16px; margin-left: -24px; font-size: 16px; line-height: 16px; background-color: blue; position: absolute; left: 50%; border-radius: 50%;
}
.hand-1 { animation-duration: 20s;
}
.hand-1:after { background-color: rgba(189, 204, 207, 0.8); content: "1";
}
.hand-2 { animation-duration: 10s;
}
.hand-2:after { background-color: rgba(114, 108, 122, 0.8); content: "2";
}
.hand-3 { animation-duration: 6.66667s;
}
.hand-3:after { background-color: rgba(225, 173, 153, 0.8); content: "3";
}
.hand-4 { animation-duration: 5s;
}
.hand-4:after { background-color: rgba(128, 101, 161, 0.8); content: "4";
}
.hand-5 { animation-duration: 4s;
}
.hand-5:after { background-color: rgba(142, 167, 108, 0.8); content: "5";
}
.hand-6 { animation-duration: 3.33333s;
}
.hand-6:after { background-color: rgba(170, 187, 158, 0.8); content: "6";
}
.hand-7 { animation-duration: 2.85714s;
}
.hand-7:after { background-color: rgba(178, 199, 121, 0.8); content: "7";
}
.hand-8 { animation-duration: 2.5s;
}
.hand-8:after { background-color: rgba(170, 118, 188, 0.8); content: "8";
}

Harmoniclock - Script Codes JS Codes

"use strict";
$(function () {});
Harmoniclock - Script Codes
Harmoniclock - Script Codes
Home Page Home
Developer Andy Vanee
Username andyvanee
Uploaded September 21, 2022
Rating 3
Size 2,966 Kb
Views 38,456
Do you need developer help for Harmoniclock?

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!

Andy Vanee (andyvanee) Script Codes
Name
Table with Fixed Header
Transform iFrame
Basic Flexbox
MaybeOn
Historical Data
Splash-to-header
Generic Stock
Ticker Example
FlipKittens
More Perspective
Create amazing art & images 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!