【JS30-2】CSS + JS Clock

閱讀時間約 2 分鐘
JS + CSS Clock

JS + CSS Clock


JavaScript30 傳送門:https://javascript30.com/
今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛


第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長這樣:

start 檔

start 檔


到頭來只需要思考如何讓指針隨著 now 動起來!



CSS transform、transition


因為要讓指針以圓心為支點旋轉,所以開始找 rotate 的方法,才對於 CSS 的 transformtransition 有更深的了解。

平常很少在 CSS 寫到這兩個屬性(或是寫到的時候都在放空),發現自己根本沒有搞懂過這兩個差別~現在要來還債惹:

  • TransformThe transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. (CSS 變換屬性可讓您旋轉、縮放、傾斜或平移元素。它修改 CSS 視覺格式化模型的座標空間。)
  • TransitionThe transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior. (CSS 過渡屬性是 transition-property、transition-duration、transition-timing-function、transition-delay和transition-behavior 的簡寫屬性。)(有講跟沒講一樣)

總之學了一年的前端,現在才知道一個是改變外觀或位置、一個是設定過渡效果😀

寫到這裡好懶,就這樣吧。

    1會員
    3內容數
    肚子餓了
    留言0
    查看全部
    發表第一個留言支持創作者!