Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="clock">
- <div class="clock-face">
- <div class="hand hour-hand"></div>
- <div class="hand min-hand"></div>
- <div class="hand second-hand"></div>
- </div>
- </div>
- <style>
- .clock {
- width: 30rem;
- height: 30rem;
- border: 20px solid white;
- border-radius: 50%;
- margin: 50px auto;
- position: relative;
- padding: 2rem;
- box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
- inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
- }
- .clock-face {
- position: relative;
- width: 100%;
- height: 100%;
- }
- .hand {
- width: 100%;
- height: 100%;
- position: absolute;
- }
- .clock-face::after {
- content: '';
- position: absolute;
- width: 30px;
- height: 30px;
- background: black;
- border-radius: 50%;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .second-hand::after {
- content: '';
- position: absolute;
- background: red;
- width: 5px;
- height: 50%;
- bottom: 50%;
- left: 50%;
- transform: translate(-50%, 0);
- }
- .min-hand::after {
- content: '';
- position: absolute;
- background: white;
- width: 10px;
- height: 40%;
- bottom: 50%;
- left: 50%;
- transform: translate(-50%, 0);
- }
- .hour-hand::after {
- content: '';
- position: absolute;
- background: white;
- width: 15px;
- height: 30%;
- bottom: 50%;
- left: 50%;
- transform: translate(-50%, 0);
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement