소스코드 다운로드로 Jquery와 CSS3 기반의 디지털 시계 만들기(CSS3)_jquery

먼저 렌더링을 보여드리겠습니다. 관심 있는 친구는 소스 코드를 다운로드할 수 있습니다.

효과 시연 소스코드 다운로드

디지털 시계는 일부 WEB 카운트다운 효과, WEB 알람 시계 효과 및 HTML5 기반 WEB APP에 적용할 수 있습니다. 이 글에서는 CSS3와 HTML을 사용하여 사진을 사용하지 않고도 매우 아름다운 디지털 시계 효과를 만드는 방법을 소개합니다.

HTML

먼저 페이지에 #clock 시계 영역을 준비하고, 표시할 숫자를 .digits에 넣어줍니다.

<div id="clock" class="light"> 
 <div class="display"> 
  <div class="digits"> 
   ...数字 
  </div> 
 </div> 
</div> 

우리가 보여줄 디지털 시계 형식은 HH:mm:ss입니다. 시, 분, 초를 나타내는 8자리 숫자와 2개의 구분 기호(:)로 구성됩니다. 예를 들어 숫자는 7개의 대시로 구성됩니다. 8은 7개의 짧은 가로 막대로 구성되며 HTML에서 .d1부터 .d7까지 7개의 범위 요소를 사용하여 CSS를 통해 다양한 숫자의 표시 효과를 결정합니다. 위의 .digits에 다음 코드를 추가하고 0부터 9까지의 클래스 값을 사용하여 숫자 0-9의 스타일을 나타내고 .dot를 사용하여 간격 기호를 나타냅니다.

<div class="eight"> 
 <span class="d1"></span> 
 <span class="d2"></span> 
 <span class="d3"></span> 
 <span class="d4"></span> 
 <span class="d5"></span> 
 <span class="d6"></span> 
 <span class="d7"></span> 
</div> 

CSS3

각 숫자 범위의 투명도를 0으로 설정했습니다. 이는 기본적으로 보이지 않음을 의미합니다. CSS3의 :before 및 :after 속성을 사용하여 숫자를 나타내는 가로 막대의 모서리 효과를 설정합니다.

#clock .digits div{ 
 text-align:left; 
 position:relative; 
 width: 28px; 
 height:50px; 
 display:inline-block; 
 margin:0 4px; 
} 
#clock .digits div span{ 
 opacity:0; 
 position:absolute; 
 -webkit-transition:0.25s; 
 -moz-transition:0.25s; 
 transition:0.25s; 
} 
#clock .digits div span:before, 
#clock .digits div span:after{ 
 content:''; 
 position:absolute; 
 width:0; 
 height:0; 
 border:5px solid transparent; 
} 
#clock .digits .d1{   height:5px;width:16px;top:0;left:6px;} 
#clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} 
#clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} 
然后，我们将数字span元素对应的dl~d7，根据数字来确定哪根横杠显示或不显示，即设置其opacity的值为1。
/* 0 */ 
#clock .digits div.zero .d1, 
#clock .digits div.zero .d3, 
#clock .digits div.zero .d4, 
#clock .digits div.zero .d5, 
#clock .digits div.zero .d6, 
#clock .digits div.zero .d7{ 
 opacity:1; 
} 

마지막으로 데모에 따라 코드를 개선하기 위한 완전한 CSS 문서가 제공되며 아름다운 디지털 시계를 볼 수 있습니다. 그래서 디지털 시계를 실제로 실행하는 방법에서 소개를 참조하세요. 다음 기사.