Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产视频2021,中文字幕日韩精品中文区,国产高清不卡码一区二区三区 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          自學(xué)前端開發(fā) 新版css時(shí)鐘效果圖
          
        
           
          
	
	
          
		自學(xué)前端開發(fā) 新版css時(shí)鐘效果圖
          
                        
          要自學(xué)前端開發(fā)，你要的學(xué)習(xí)資料到了-前端/JAVA/PHP學(xué)習(xí)交流群，新版css時(shí)鐘效果圖
          <!DOCTYPE html>
          <html>
           <head>
           <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
           <title>RunJS</title>
           <style>
           .clock{
           width:200px;
           height:200px;
           border-radius:100%;
           position:relative;
           background-image:url(
          );
           background-size:100%;
          }
          .line{
           height:4px;
           background-color:red;
           margin-left:-15px;
           margin-top:-2px;
          }
          .original{
           position:absolute;
           left:50%;
           top:50%;
           width:1px;
           height:1px;
           float:left;
          }
          .clock>.point{
           position:absolute;
           top:50%;
           left:50%;
           margin-left:-5px;
           margin-top:-6px;
           width:3px;
           height:3px;
           padding:5px;
           background-color:red;
           border-radius:13px;
          }
          .original.seconds{
           -webkit-animation:rotate_origin60s linear infinite;
           animation:rotate_origin60s linear infinite;
          }
          .original.seconds>.line{
           background-color:red;
           width:100px;
           height:2px;
          }
          .original.minutes{
           -webkit-animation:rotate_origin3600s linear infinite;
           animation:rotate_origin3600s linear infinite;
          }
          .original.minutes>.line{
           background-color:blue;
           width:80px;
           height:3px;
          }
          .original.hours{
           -webkit-animation:rotate_origin86400s linear infinite;
           animation:rotate_origin86400s linear infinite;
          }
          .original.hours>.line{
           width:60px;
           background-color:green;
          }
          @-webkit-keyframes rotate_origin{
           from{
           -webkit-transform:rotateZ(0deg);
           }
           to{
           -webkit-transform:rotateZ(360deg);
           }
          }
          @keyframes rotate_origin{
           from{
           transform:rotateZ(0deg);
           }
           to{
           transform:rotateZ(360deg);
           }
          }
           </style>
           </head>
           <body>
           <divclass="clock">
           <divclass="original hours">
           <divclass="line"></div>
           </div>
           <divclass="original minutes">
           <divclass="line"></div>
           </div>
           <divclass="original seconds">
           <divclass="line"></div>
           </div>
           <divclass="point"></div>
           </div>
           </body>
          </html>
          景：最近在學(xué)習(xí)CSS3，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來。
          鐘表效果
          實(shí)現(xiàn)過程
          1.首先我們需要在頁(yè)面中寫出一個(gè)靜態(tài)的鐘表效果。首先我們需要一個(gè)表盤div wrap 對(duì)其進(jìn)行簡(jiǎn)單的樣式設(shè)置，用border-radius屬性將其設(shè)置成圓形。
          <div id="wrap"></div>
 #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}
          2.接下來我們用ul和li來寫表盤中的刻度，對(duì)其進(jìn)行簡(jiǎn)單的樣式設(shè)置。其中需要注意的是，我們用 -webkit-transform-origin:center 100px;來設(shè)置我們的旋轉(zhuǎn)基點(diǎn)。然后利用 -webkit-transform: rotate(0);讓我們的li旋轉(zhuǎn)相應(yīng)的角度形成相應(yīng)的刻度。
           <ul id="list">
 <li></li> <!--刻度-->
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul> #wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;} #wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;} #wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);} #wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);} #wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);} 
 #wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);} #wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);} #wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);} #wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);} #wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);} #wrap ul li:nth-of-type(5n+1){ height:12px;}
          3.其中我們?cè)O(shè)計(jì)到了css3的選擇器nth-of-type() ，它規(guī)定其屬于其父元素的第幾個(gè)li元素。
          當(dāng)然，我們不可能將表盤的刻度都統(tǒng)統(tǒng)去設(shè)置li的樣式去完成。我們后面需要用js去渲染它。
          在渲染之前，我們需要去寫上我們的秒針、分針、時(shí)針。分別是div hour、min、sec，并且我們對(duì)其進(jìn)行樣式的設(shè)置。為了美化一下，我們?cè)賹懸粋€(gè)div icon，圓點(diǎn)。并對(duì)其進(jìn)行簡(jiǎn)單樣式設(shè)置。
           <div id="hour"></div>
 <div id="min"></div>
 <div id="sec"></div>
 <div class="icon"></div>
 #hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
 #min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
 #sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
 .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
          4.接下來我們來寫一下讓鐘表動(dòng)起來的JavaScript，首先用js去獲取各個(gè)div。
           var oList=document.getElementById("list");//獲取到刻度
 var oCss=document.getElementById("css"); var oHour=document.getElementById("hour");//獲取時(shí)針
 var oMin=document.getElementById("min");//獲取分針
 var oSec=document.getElementById("sec");//獲取秒針
 var oLi=""; var sCss="";
          5.接下來去渲染表盤的刻度。
           for (var i=0;i<60;i++) { //一個(gè)表盤總共是60個(gè)刻度
 sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
 oLi+="<li></li>";
 };
 oList.innerHTML=oLi;
 oCss.innerHTML+=sCss;//表盤刻度渲染完成
          6.接下來我們?nèi)懸粋€(gè)鐘表表針根據(jù)時(shí)間變動(dòng)的函數(shù)，先利用new Date（）獲取時(shí)間，然后通過去改變表針的樣式去讓表針根據(jù)時(shí)間去轉(zhuǎn)動(dòng)，秒針一秒相當(dāng)于旋轉(zhuǎn)6度，分鐘一秒相當(dāng)轉(zhuǎn)動(dòng)6度，時(shí)針轉(zhuǎn)動(dòng)1秒相當(dāng)于轉(zhuǎn)動(dòng)30度。
          function toTime(){ var oDate=new Date();//獲取當(dāng)前時(shí)間
 var iSec=oDate.getSeconds();//獲取當(dāng)前秒
 var iMin=oDate.getMinutes()+iSec/60;//獲取當(dāng)前分
 var iHour=oDate.getHours()+iMin/60;//獲取當(dāng)前時(shí)
 oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉(zhuǎn)動(dòng)角度1秒6度 (表盤一圈360度一圈60秒所以一秒6度)
 oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉(zhuǎn)動(dòng)角度1分6度 (表盤一圈360度一圈60分所以一分6度)
 oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時(shí)針轉(zhuǎn)動(dòng)角度一小時(shí)30度(表盤一圈360度一圈12小時(shí)所以一小時(shí)30度)
 };
          7.最后我們來開一個(gè)定時(shí)器，讓函數(shù)隔一秒執(zhí)行一次。
           toTime();
 setInterval(toTime,1000);
          至此一個(gè)鐘表效果就寫完了，下面是全部源代碼
          效果源碼
          款基于HTML5和CSS3的圓盤時(shí)鐘動(dòng)畫，它的特點(diǎn)是圓盤時(shí)鐘側(cè)邊帶有實(shí)時(shí)更新的數(shù)字時(shí)鐘，而且時(shí)鐘在走動(dòng)時(shí)還會(huì)發(fā)出滴答滴答的聲音。
          效果圖
          代碼：
          JavaScript代碼：
          頁(yè)面布局：
          css樣式：
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产激情无码一区二区|
八戒久久精品一区二区三区|
国产精品亚洲高清一区二区|
精品亚洲一区二区三区在线播放|
超清无码一区二区三区|
亚洲精品日韩一区二区小说|
亚洲一区二区三区夜色|
国产高清在线精品一区二区三区|
国产精品一区二区三区高清在线|
无码国产精品一区二区免费式影视|
中文字幕一区二区三区有限公司|
午夜AV内射一区二区三区红桃视
|
日韩精品一区二区三区视频|
3d动漫精品啪啪一区二区中|
久久精品一区二区三区资源网|
午夜肉伦伦影院久久精品免费看国产一区二区三区
|
日韩十八禁一区二区久久|
国产精品香蕉在线一区|
久久久精品人妻一区二区三区|
国产日韩精品一区二区三区在线
|
国产一区二区精品尤物|
视频精品一区二区三区|
国产一区二区三区樱花动漫|
久久中文字幕无码一区二区
|
春暖花开亚洲性无区一区二区|
精品欧洲av无码一区二区|
亚洲一区二区三区91|
97精品国产一区二区三区|
无码播放一区二区三区|
亚洲一区二区三区高清不卡|
中文激情在线一区二区|
精品无码人妻一区二区三区18|
亚洲国产成人久久一区二区三区|
国产手机精品一区二区|
免费高清av一区二区三区|
成人国产精品一区二区网站|
狠狠做深爱婷婷综合一区
|
亚洲一区二区三区高清视频|
国产主播福利一区二区|
日本免费电影一区|
久久精品人妻一区二区三区
|