https://ithelp.ithome.com.tw/articles/10192635
文字的變化
除了水平、垂直、旋轉移動之外
CSS還可以作出顛倒的字、圖
.reflect{box-reflect:below 10px;}
除了文字、圖像生成在下方的顛倒還可以換成是生成在上方或左右
以及可以用漸層生成背景和遮罩選擇性遮掉
/* Direction values */
box-reflect: above; /* 生成在文字上方 */
box-reflect: below; /* 生成在文字下方 */
box-reflect: left; /* 生成在文字左方 */
box-reflect: right; /* 生成在文字右方 */
/* Offset value */
box-reflect: below 10px; /* 與文字之間的距離 */
/* Mask value */
box-reflect: below 0 linear-gradient(transparent, white);
/* 用漸層生成背景 */
box-reflect: below 10px url(圖像); /* 使用遮罩 */
細節可參考
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
要把文字彎曲作出弧形
或是作成像是繞圓一樣時
如果使用 jQuery
$(document).ready(function() {
$(".line-2").arctext({radius: 700});
});
radius 的數值愈小弧度愈大
$(document).ready(function() {
$(".line-2").arctext({radius: 100});
});
https://codepen.io/zambo/pen/jKEDp
csswarp 可將文字搭配自訂曲線，讓文字旋轉、彎曲的 CSS 及 HTML 產生器
https://key.chtouch.com/ContentView.aspx?P=994
http://csswarp.eleqtriq.com/
https://github.com/dirkweber/csswarp.js
https://www.oxxostudio.tw/articles/201406/css-cubic-bezier.html
Cubic Bezier 就是一個具有兩個端點與兩個貝茲控制點的曲線，( SVG 裏頭 Path 的 "C" 參數 )，其實這個利用貝茲曲線的控制方式在大多數的 CSS 中都不常見，主因這是 CSS3 裏頭動畫的速度控制選項，通常我們在設定動畫的速度，大多直接使用 ease in 或 ease out 來取代，但藉由 Cubic Bezier，我們更可以創造出各種不同速度控制的動畫效果。
