資訊專欄INFORMATION COLUMN
摘要：這里調(diào)用是為了選取元素方便而已，初學(xué)建議用選取元素
meta charset="UTF-8"/ meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" / title /title style margin: 0px; padding: 0px; .clock{ width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; position: relative; margin: 20px; background-size: 100%; .clock .hour{ width: 10px; height: 70px; background: orange; position: absolute; left: 95px; top: 30px; /*animation: sec 86400s infinite;*/ .clock .minute{ width: 6px; height: 80px; background: deepskyblue; position: absolute; left: 97px; top: 20px; /*animation: sec 3600s infinite;*/ .clock .second{ width: 2px; height: 90px; background: red; position: absolute; left: 99px; top: 10px; /*animation: sec 60s infinite;*/ @keyframes sec{ 0%{transform-origin: center bottom;transform: rotate(0deg);} 100%{transform-origin: center bottom;transform: rotate(360deg);} /style /head body div div /div div /div div /div /div /body script src="/cnblogs html/css/jquery.min.js" /script !--這里調(diào)用jquery是為了選取元素方便而已，初學(xué)建議用dom選取元素-- script function fn(){ var myDate=new Date; var h=myDate.getHours(); var m=myDate.getMinutes(); var s=myDate.getSeconds(); $(".clock .hour").css({"transform-origin":" center bottom","transform":"rotate("+30*h+"deg)"}); $(".clock .minute").css({"transform-origin":" center bottom","transform":"rotate("+6*m+"deg)"}); $(".clock .second").css({"transform-origin":" center bottom","transform":"rotate("+6*s+"deg)"}); fn(); setInterval(fn,1000); /script /html文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/792.html
摘要：這里調(diào)用是為了選取元素方便而已，初學(xué)建議用選取元素 *{ margin: 0px; padding: 0px; } .clock{ width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; ...
我們先看看粒子時(shí)鐘的效果，如下：showImg(https://segmentfault.com/img/remote/1460000016290266);下面我們將通過(guò)canvas和js實(shí)現(xiàn)，首先要?jiǎng)?chuàng)建一個(gè)html文件并添加一個(gè)canvas畫(huà)布，如下： Document .container{ margin: 0, aut...
摘要：上一篇文章講解了如何用實(shí)現(xiàn)粒子時(shí)鐘，本篇文章，主要是使用重構(gòu)，讓它在也能使用。若有疑問(wèn)或需要素材，請(qǐng)加群交流 上一篇文章講解了如何用js+canvas實(shí)現(xiàn)粒子時(shí)鐘，本篇文章 ，主要是使用vue重構(gòu)，讓它在vue也能使用。 我們使用簡(jiǎn)單的方式重構(gòu)，不使用vue工程，先加入vue cdn的地址，如下： 然后，重構(gòu)Clock對(duì)象構(gòu)造器，改為將canvas傳入，如下： function Cl...
閱讀 2600·2023-04-25 21:41
閱讀 1726·2021-09-22 15:17
閱讀 2015·2021-09-22 10:02
閱讀 2509·2021-09-10 11:21
閱讀 2666·2019-08-30 15:53
閱讀 1079·2019-08-30 15:44
閱讀 1000·2019-08-30 13:46
閱讀 1290·2019-08-29 18:36
