Javascript가 없는 멋진 CSS 시계

14859 단어 htmlshowdevwebdevcss
오늘 저는 Javascript 없이 순수 CSS 시계를 만드는 방법을 보여드리고자 합니다.

첫째, CSS 애니메이션이란 무엇입니까?
CSS 애니메이션은 디자이너와 개발자가 웹 사이트의 CSS 코드를 편집하여 애니메이션을 추가할 수 있도록 하는 Cascading Style Sheets용으로 제안된 모듈입니다.

코드로 이동해 보겠습니다.

<div class="clock">
  <div class="twelve"></div>
  <div class="three"></div>
  <div class="six"></div>
  <div class="nine"></div>
  <div class="center"></div>
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="second"></div>
</div>


그리고 약간의 CSS:

body {
     background-color: #0a192f;
}
 .clock {
     position: relative;
     height: 200px;
     width: 200px;
     background: white;
     box-sizing: border-box;
     border-radius: 100%;
     border: 20px solid #ffde64;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
}
 .clock .twelve {
     position: absolute;
     width: 6px;
     height: 8px;
     background: #262626;
     left: 0;
     right: 0;
     margin: 0 auto;
}
 .clock .three {
     position: absolute;
     width: 8px;
     height: 3px;
     background: #262626;
     top: 0;
     bottom: 0;
     right: 0;
     margin: auto 0;
}
 .clock .six {
     position: absolute;
     width: 6px;
     height: 8px;
     background: #262626;
     left: 0;
     right: 0;
     bottom: 0;
     margin: 0 auto;
}
 .clock .nine {
     position: absolute;
     width: 8px;
     height: 3px;
     background: #262626;
     top: 0;
     bottom: 0;
     left: 0;
     margin: auto 0;
}
 .clock .center {
     height: 6px;
     width: 6px;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     background: #262626;
     border-radius: 100%;
}

 .clock .hour {
     width: 3px;
     height: 100%;
     position: absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
     animation: time 60s infinite linear;
}
 .clock .hour:before {
     position: absolute;
     content: "";
     background: #262626;
     height: 60px;
     width: 3px;
     top: 30px;
}
 .clock .minute {
     width: 1px;
     height: 100%;
     position: absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
     animation: time 30s infinite linear;
}
 .clock .minute:before {
     position: absolute;
     content: "";
     background: #262626;
     height: 40px;
     width: 1px;
     top: 50px;
}
 .clock .second {
     width: 2px;
     height: 100%;
     position: absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
     animation: time 15s infinite linear;
}
 .clock .second:before {
     position: absolute;
     content: "";
     background: #fd1111;
     height: 45px;
     width: 2px;
     top: 45px;
}
 @keyframes time {
     to {
         transform: rotate(360deg);
    }
}


이것이 우리의 결과입니다.



모두 감사합니다.
귀속 (coded with python3)
leetcode - Remove Invalid Parentheses

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage