# 純 CSS 愛心動畫 [竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html),學習紀錄,2019/02/14。 >[Pure CSS Animated Heart Shape](https://www.youtube.com/watch?v=uGG5aHlnwgE) ###### tags: `radial-gradient` `border-radius` `animation` `transform` ## CodePen >[CodePen:純 CSS 愛心動畫](https://codepen.io/chupai/pen/XOBeao) <iframe height="265" style="width: 100%;" scrolling="no" title="純 CSS 愛心動畫" src="//codepen.io/chupai/embed/XOBeao/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chupai/pen/XOBeao/'>純 CSS 愛心動畫</a> by Chupai@Design (<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> ## radial-gradient() >[radial-gradient()|MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient) 由原點(漸變中心)輻射開的顏色漸變。 ## border-radius 外邊框圓角 >[border-radius|MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius) ## transform >[transform|MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform) `transform` CSS 屬性可以讓你修改 CSS 可視化格式糢型(visual formatting model)的空間維度。使用此屬性,元素可以被平移、旋轉、縮放和傾斜。 - `translate(x,y)`,元素水平、垂直移動。 - `translateX(x)`,元素水平移動。 - `translateY(y)`,元素垂直移動。 - `scale(x,y)`,元素縮放。 - `scaleX(x)`,元素水平方向縮放。 - `scaleY(y)`,元素垂直方向縮放。 - `rotate(angle)`,元素旋轉的角度。 - `skew(x-angle,y-angle)`,元素傾斜設定。 - `skewX(angle)`,元素水平傾斜設定。 - `skewY(angle)`,元素垂直傾斜設定。 - `matrix(n,n,n,n,n,n)`,以含有 6 個參數值的變化定元素的變形效果。 - `none`,不進行任何變換。 ## transform-origin `transform-origin` 屬性為複合屬性值,其屬性包含水平(X 軸),與垂直(Y軸),方向的變量參數,變量參數間以空白隔開。如果只給一個數值,則變更水平(X 軸),垂直(Y軸)不變。 可用屬性值: - 長度,數值 + 單位 - `%`(百分比),以元素預設中間的點的基準為百分比值。 - `left`,靠左,水平方向位置的選項,等同 `0%`。 - `right`,靠右,水平方向位置的選項,等同 `100%`。 - `top`,靠上,垂直方向位置的選項,等同 `0%`。 - `bottom`,靠下,垂直方向位置的選項,等同 `100%`。 - `center`,置中, 水平、垂直方向位置的選項,等同 `50%`。