iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 2

[Day2] CSS + JS Clock

[Day2] CSS + JS Clock

運用 CSS 和 Javascript 做一個虛擬時鐘

需要用到的技巧與練習目標

  1. transform-origin 和 transform rotate
  2. transtion 和 transtion-timing-function
  3. setInterval
  4. new Date() 和 getSeconds()/getMinutes()

關於 [ CSS ] transform-origin

transform-origin

修改物件選轉中心所用到的CSS,預設值是由中心旋轉 即為50%,由於時鐘所需要固定旋轉的位置為最末端,所以這裡改為100%

transtion-timing-function

參考資料來源:

  1. https://ithelp.ithome.com.tw/articles/10192719
  2. https://wcc723.github.io/css/2013/10/10/css-transform-origin/

上一篇
[Day1] JavaScript Drum Kit
下一篇
[Day3] Playing with CSS Variables and JS
系列文
JavaScript 30天 跟著一起做一遍!!!30

尚未有邦友留言

立即登入留言