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()
的at
syntax 目前並未被 safari 支援,亦即 iPhone 上的 Chrome 瀏覽器無法將字母 O 中的圓點設定在左上角 O<=