2022 第23週 實作筆記：使用 transform rotate() 實作過場動畫
總結
最終未被採用的過場動畫試做，記錄一下如何使用 CSS 搭配 transform: rotate() 做出在字母 O 中旋轉圓點的效果
See the Pen animation test by Charlie (@Charlie7779) on CodePen.
筆記
- 將裝載字母 O 的 div 設定為
position: relative;後，搭配:before與radial-gradient畫出字母 O 中的圓點 radial-gradient的at <position>指定 gradient 從何處開始繪製，原理與background-position一致；原始碼中at 3px 3px即代表 gradient 從左上角向右、向下各偏移 3px 後作為起始點開始繪製- W3C 原文：
<position>Determines the center of the gradient. The<position>value type (which is also used for background-position) is defined in CSS-VALUES-3, and is resolved using the center-point as the object area and the gradient box as the positioning area. If this argument is omitted, it defaults to center.
- W3C 原文：
- 使用
transform: rotate()旋選:before即可 - 原始碼中的
background-color: rgba(255, 0, 255, 0.6);純粹是填色後方便檢查現在:before的推移位置，方便調整 top 與 left 數值
注意事項
radial-gradient()的atsyntax 目前並未被 safari 支援，亦即 iPhone 上的 Chrome 瀏覽器無法將字母 O 中的圓點設定在左上角 O<=