The 21st century: CSS

顯示具有 CSS 標籤的文章。顯示所有文章

CSS Sprite 與 RWD 的整合：縮放大小

http://www.manongjc.com/article/26907.html

transform:scale( x )

语法为 transform: scale(x,y). 同时有 scaleX, scaleY 专门的 x, y 方向的控制，
例如 transform: scale(0.5) 缩小为原来的一半。
scale 并不支持百分比和 normal关键字，只能是数值。而且还能是负数。

zoom:x

zoom 支持百分比和 normal 关键字，不支持負數， zoom:0.5 也是缩小为原来的一半。

zoom：normal | <number> | <percentage>

在文档中，zoom 加在任意一个元素上都会引起一整个页面的重新渲染，而 scale 只是在当前的元素上重绘。

当你给一个 div 固定宽高时，scale 变化的时候，其原本的宽高还是不变的，只不过里面的元素缩小了而已，因此，就没有 layout 的重计算。

但是 zoom 則會進行 layout 的重计算。

CSS Radio Buttons

http://cssdeck.com/labs/ufct35ys5t

https://freefrontend.com/css-radio-buttons/

HTML iframe 框架語法與其使用限制與缺點

被放進框架的內容網頁不見得能夠在手機等行動裝置上正常運作，相容性很混亂

https://blog.csdn.net/Abraham_bug/article/details/80053210

無法滾動、解決滾動同時要防止框架外的移動等等衝突問題

HTML iframe 框架語法 => HTML5 改為使用 CSS 設定
https://www.w3schools.com/tags/tag_iframe.asp

iframe 連結另外開啟新視窗或在原本網頁開啟
http://www.wibibi.com/info.php?tid=374

深入了解 /iframe有那些缺點/ Iframe傳值問題
https://medium.com/@small2883/iframe%E4%BB%8B%E7%B4%B9-%E6%B7%B1%E5%85%A5%E4%BA%86%E8%A7%A3-iframe%E6%9C%89%E9%82%A3%E4%BA%9B%E7%BC%BA%E9%BB%9E-iframe%E5%82%B3%E5%80%BC%E5%95%8F%E9%A1%8C-579e6c113436

iframe這個詞是inline frame的縮寫。

iframe屬性：

1.frameborder:是否顯示邊框，1(yes),0(no)
2.height:height屬性指定了iframe的像素高度，建議使用css設置。
3.width:width屬性指定了iframe的像素寬度，建議使用css設置。
4.name:iframe的名稱，window.frames[name]時專用的屬性。
5.scrolling:iframe是否滾動。yes,no,auto。
6.src：iframe的網址。
7.sandbox:控制iframe內的權限(html5新功能)：http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/?redirect_from_locale=zhhttp://msdn.microsoft.com/en-us/hh563496.aspx

為什麼前端盡量少用iframe? iframe有哪些缺點：

1.iframe会阻塞主頁面的Onload事件；
2.搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
3.iframe和主頁面共享連接池，而瀏覽器對同域的連接有限制，所以会影響頁面的並行加載。
4.因为iframe等于打開一个新的網頁，所有的JS/CSS全部加載一遍，内存会*2
5.是否同域的問題

我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM)。
但前提條件是同域，如果跨域頂多只能實現頁面跳轉window.location.href。

同域時，父頁面可以对子頁面進行改寫，反之亦然。
不同域，父頁面没有權限改動子頁面，但可以實現頁面的跳轉。

如果需要使用 iframe，最好是通过 javascript 動態给 iframe 添加 src 屬性值，这样可以避開一些 iframe 的缺點：

https://stackoverflow.com/questions/6000987/dynamically-set-iframe-src

跨域傳值，方法之一是使用
window.frames[0].postMessage($txt_val, ‘*’); 傳值
window.addEventListener(“message”, receiveMessage);取值
可參考
https://dotblogs.com.tw/daniel/2017/11/25/225511
https://www.cnblogs.com/dolphinX/p/3464056.html
https://blog.csdn.net/kenhins/article/details/50789125

CSS 做文字特效

CSS：box-reflect 顛倒文字
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，我們更可以創造出各種不同速度控制的動畫效果。

純 CSS 的形狀變換

一個超酷的網站，完全使用 CSS 製作出的精彩特效，以30種瀕危物種為主題：
http://species-in-pieces.com/

https://www.oxxostudio.tw/articles/201503/css-clip-path.html

專門介紹「clip-path」這個 CSS3 的屬性，你可以直接在上面拖拉或修改，除了貝茲曲線外，幾乎任何形狀都做得出來 ( 中空的部分要用組合的 )：
http://bennettfeely.com/clippy/

網頁設計：波浪特效

google『css wave』、『css wave font』

https://codepen.io/tedmcdo/pen/PqxKXg

https://www.cnblogs.com/coco1s/p/7197662.html

使用 javascript 動態更改 CSS 的各種方式

https://www.jianshu.com/p/0260cddff86a

在很多情况下，都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。

1、使用obj.className来修改样式表的类名。
2、使用obj.style.cssTest来修改嵌入式的css。
3、使用obj.className来修改样式表的类名。
4、使用更改外联的css文件，从而改变元素的css

下面是一段html代码和css代码用来解释上面方法的区别的。

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

<div>
<input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
<div id="tool">
<input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
<input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
<input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
<input type="button" value="更改外联css样式" onclick="recover()" />
</div>
</div>

一、使用obj.className来修改样式表的类名

从下面的代码可以看出ob.style.cssTest是如何来btnB的样式的。

function changeStyle1() {
var obj = document.getElementById("btnB");
obj.style.backgroundColor= "black";

}

该段代码修改btB的文字的颜色，在浏览器中打开调试工具，可以发现btB标签中多了一个属性【style="background-color:black"】，从而改变btB的样式。

缺陷：
在修改btB的背景色之后用鼠标放到btB上可以发现，btB的伪类hover里面的css根本不起作用。原来是当你修改了这个这样样式之后。在btB的内联样式中多了background-color属性了，在css的应用中也是有级别的，嵌入式>内联式>外联式。而btB的hove伪类的background-color样式写在内联式中，所以嵌入式的background-color覆盖了伪类中，这就使得鼠标放入btB上感觉不到背景颜色的变化。

二、使用obj.style.cssTest来修改嵌入式的css

直接上JavaScript代码：

function changeStyle2() {
var obj = document.getElementById("btnB");
obj.style.cssText = "background-color:black; display:block;color:White;

}

该段代码和【一】中的效果是一样的，缺陷也是一样。

三、使用obj.className来修改样式表的类名

使用代码来修改btB引用样式的类名，如下段代码：

function changeStyle3() {
var obj = document.getElementById("btnB");
//obj.className = "style2";
obj.setAttribute("class", "style2");
}

通过更改btB的css的类名的方式来更改样式，更改样式类名有两种方式。1、obj.className = "style2"; 2、 obj.setAttribute("class", "style2");都是一样的效果。

用这种方式来修改css比上面的效果要好很多。

四、使用更改外联的css文件，从而改变元素的css

通过更改外联的css文件引用从而来更改btB的样式，操作很简单。代码如下：

首先得引用外联的css文件，代码如下：

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
var obj = document.getElementById("css");
obj.setAttribute("href","css2.css");
}

这样也能方便的更改btB的样式，个人觉得这种方式是最好用的。是实现整体页面换肤的最佳方案。

CSS Fonts - 系統內建字體的相關設定

詳閱 https://www.w3schools.com/css/css_font.asp

SVG 動畫範例

打勾勾、打叉叉：https://codepen.io/elevaunt/pen/JYRBzJ
波浪、微笑曲線：https://codepen.io/thebabydino/pen/CxkHm

CSS 排版兩大利器：Flexbox vs Grid

网页布局（layout）是 CSS 的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

CSS 终极之战：Grid VS Flexbox

Flexbox 是为一维布局设计的，而 Grid 是为二维布局设计。

https://zhuanlan.zhihu.com/p/31952490
https://itw01.com/2HBQEPH.html

內容優先 vs 佈局優先

Flexbox 以內容為基礎， Grid 以佈局為基礎。

Flexbox 以內容為基礎，為一維布局而設計

https://eden-liu.com/frontend/css3-flexbox-key-points/
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://www.oxxostudio.tw/articles/201501/css-flexbox.html
https://wcc723.github.io/css/2017/07/21/css-flex/

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

CSS3 Flexbox，是一種優於傳統 float 僅能水平流動的排版，更能做到置中、垂直與等距等等。

軸線觀念

主軸：
- justify-content
- 可對其主軸的起點、終點或等距排列
交錯軸：
- align-items
- 可對其交錯軸的起點、終點或置中
flex-direction，可改變主軸的方向性 (預設主軸是由左至右)
- 水平
- 垂直
- 反轉

外層屬性

display：必備屬性
flex-flow
- flex-direction：決定 flex 軸線
- flex-wrap：決定換行的屬性
justify-content：主軸的對齊
align-items：交錯軸的對齊

內層屬性

flex
- flex-grow：伸展比
- flex-shrink：收縮比
- flex-basis：絕對值
order：排序
align-self：單一物件的交錯軸對齊

接著來看一下細部的屬性介紹

flex-direction

對齊方法

row (default)
row-reverse
column
column-reverse

justify-content

主軸對齊 (外層) ，依據主軸的軸線決定物件之間的間隔方法

以下是 justify-content 所有屬性：

flex-start
flex-end
center
space-between
space-around

節錄：MSDN

align-items

交錯軸對齊 (外層)，垂直於主軸的對齊方法

flex-start
flex-end
center
strech：拉滿整個軸線
baseline：與文字的行高有關係，以文字基準線來排列

節錄：MSDN

align-self

交錯軸對齊 (內層)，內元件本身垂直於主軸的對齊方法

flex-start
flex-end
center
strech：拉滿整個軸線
baseline：與文字的行高有關係，以文字基準線來排列

以骰子布局為例子，實作所有基礎寫法範例：
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

看看Flex如何实现，从1个点到9个点的布局。有 codepen 可以查看Demo。
詳閱該文章有完整說明。

Grid 以佈局為基礎，為二維布局而設計

http://muki.tw/tech/css-grid-note/
https://blog.techbridge.cc/2017/02/03/css-grid-intro/

幾年前出現的 FlexBox 宛如神兵利器，讓我們可以擺脫這些困擾，快速進行排版，而隨著 CSS Grid 規範的出現，我們即將有更好的武器了！

CSS Grid 不是要來取代 Flexbox，他們是相輔相成的角色，flex 可以看作是 one-dimensional layout solution，CSS Grid 則是 two-dimentional layout solution，用來解決我們所有先前需要各種 hack 才能完成的頁面佈局。

不過包括 IE 在內的舊瀏覽器仍是無法支援 CSS Grid 的。

IE exist. Use Grid?
https://www.youtube.com/watch?v=7msERxu7ivg

從 CSS sprite 進化到 SVG sprite

從 CSS sprite 進化到 SVG sprite：
http://muki.tw/tech/css-to-svg-sprite/

Web Icon Font (簡稱 icon font)：
https://www.oxxostudio.tw/articles/201406/css-icon-font.html

未来必热：SVG Sprite技术介绍
https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

SVG 的使用細節：
http://www.ruanyifeng.com/blog/2018/08/svg.html
https://zhuanlan.zhihu.com/p/25016633
https://github.com/YIXUNFE/blog/issues/31
https://www.oxxostudio.tw/articles/201410/svg-tutorial.html

CSS Sprite：

可以有效減少 HTTP 需求，但他終究是圖片，只要把網站等比放大，圖片就可能會失真。在現今螢幕解析度提高，以及 RWD 網站盛行的環境下，用 CSS sprite 要面對的可能就是這種失真的小瑕疵。

另外一個比較惱人的困擾，就是要把所有的 icon 排在同一張圖片，再自己算出定位，其實很麻煩。雖然可以使用 compass 這樣的 CSS 預處理器幫忙，但也不是所有人都用 compass 啊。

Web Icon Font：

好處是解決了「失真」的困擾，因為即使放大縮小，它的本質還是文字，文字放大縮小是不會失真的，可以保持它原有的清晰度。

但困擾來了，正因為他是文字，所以必須乖乖遵守文字的規範，我們常碰到的問題就是在「鋸齒」與「抗拒齒」之間徘徊，通常瀏覽器都會替文字進行抗拒齒的優化，以免放大閱讀文字時，會有凹凸不平的鋸齒狀，有的時候，某些圖標我們需要這些鋸齒，但另外一些圖片我們需要抗鋸齒，線段類的圖案、圓弧狀的圖案 … 等等，會依照不同的樣式有不同的需求。

Icon font 還有其他不方便的地方，例如受到 font-size, line-height 等等字型屬性的限制。一次要載入上百張 Icon font 的字型檔，但實際上用到的只是那幾張小圖，浪費了讀取的時間。最後還有一點是各家的 Icon font 整合不易。

補充資料：
Icon Font 導入 SVG 後，開始支援彩色圖標，通過一些技巧，支持像字體那樣，可以通過 font size 或 color 來微調。

IcoMoon，他是一個整合眾家 Icon font 的網站，此外也支援 SVG 匯出。

SVG sprite：

在講 SVG sprite 之前，需要先簡單講一下什麼是 SVG。SVG 簡單講就是用程式碼畫圖，這句話傳達了兩個意思：一、你必須要寫程式碼；二、他是不會失真的向量圖。

SVG 圖片所有的線段(<path>)都是寫在 HTML 裡面，然後再利用 CSS 屬性去修改它的顏色、大小等樣式。

每一張圖片都有一個自己的 <path> 或者 <circle> 等屬性，通常會寫在網頁的最上方，再利用<use xlink:href="#icon-video-camera"></use>呼叫。

雖然使用 SVG 可以有效解決解析度、鋸齒等等問題，但如果要載入多張不同的圖片，程式碼會拖得很長。為了解決這個問題，我們可以改用 SVG sprite，也就是將所有圖片存在 SVG 檔案，再從 HTML 呼叫他。

SVG sprite 實作

以 IcoMoon 網站為例，先選好你要的圖片，在匯出 SVG 之前勾選 Include Tiles (CSS Sprite)

解壓縮之後，找到sprite/目錄，裡面有一個sprite.svg，原理就跟 sprite.png 一樣，會把所有圖案排列整齊，差別在於它是向量圖，放大縮小都不會失真。

接下來只要在 HTML 載入這張 SVG 檔案，並且透過ID去呼叫對應的 icon 就可以了。

<svg class="icon" xmlns="http://www.w3.org/2000/svg">
 <use xlink:href="sprite.svg#icon-facebook"></use>
</svg>
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
 <use xlink:href="sprite.svg#icon-feed"></use>
</svg>

在 xlink:href 的地方，輸入這個 svg 檔案的相對路徑，後面再寫 ID 即可，跟 CSS sprite 相比是不是簡單許多呢。我們不需要再寫 background-position 去調整他的位子，往後要新增其他的 icon，直接打開 sprite.svg 編輯就可以了！

使用 IcoMoon 的 SVG sprite 注意事項：

IcoMoon 可以直接提供我們 SVG 的 path 程式碼，而且可以個別匯出，但如果想用 IcoMoon 做 SVG sprite，需要特別注意一件事情，就是可能需要自行修改它的 SVG 檔案。

什麼意思呢？因為 IcoMoon 把 icon 的顏色、大小都寫死在 SVG 檔案裡，這恐怕不是很好的管理方式。

以icon-facebook為例，IcoMoon 是這樣寫的：

<svg id="icon-facebook" width="32" height="32" viewBox="0 0 32 32" x="48" y="0">
<path fill="#444444" d="M26.667 0h-21.334c-2.945 0-5.333 2.388-5.333 5.334v21.332c0 2.946 2.387 5.334 5.333 5.334h10.667v-14h-4v-4h4v-3c0-2.761 2.239-5 5-5h5v4h-5c-0.552 0-1 0.448-1 1v3h5.5l-1 4h-4.5v14h6.667c2.945 0 5.333-2.388 5.333-5.334v-21.332c0-2.946-2.387-5.334-5.333-5.334z"></path>
</svg>

以下則是建議修改後的版本：

<svg>
 <symbol id="icon-facebook" viewBox="0 0 32 32">
  <path d="M26.667 0h-21.334c-2.945 0-5.333 2.388-5.333 5.334v21.332c0 2.946 2.387 5.334 5.333 5.334h10.667v-14h-4v-4h4v-3c0-2.761 2.239-5 5-5h5v4h-5c-0.552 0-1 0.448-1 1v3h5.5l-1 4h-4.5v14h6.667c2.945 0 5.333-2.388 5.333-5.334v-21.332c0-2.946-2.387-5.334-5.333-5.334z"></path>
 </symbol>
</svg>

可以發現改用 <symbol> 管理 icon，並且移除了他們固定的樣式，當然要更加結構化，可以再加上<title>或<def>等標籤。

重點在於，如果不把 IcoMoon 寫的樣式移除，我們將無法用 CSS 控制這些樣式，所以請特別記住這一點！

筆者將 IcoMoon 跟修改後的 SVG 檔案放在網站上，可以自行打開原始碼比對。

IcoMoon：http://muki.tw/blog-demo/svg-sprite/sprite-icomoon.svg
MUKI edit：http://muki.tw/blog-demo/svg-sprite/sprite.svg

採用 CSS 編譯器開發的風險

https://blog.user.today/scss/
https://cythilya.github.io/2018/08/10/postcss/

CSS 編譯器有許多優點，除了提高開發速度，也為團隊協同開發帶來了許多方便，且PostCSS/SCSS/SASS/LESS 巢狀結構的程式原始碼，其可讀性相較 CSS 提高許多；然而，前端的變化過大，也帶來了如下風險：

編譯器改版或想改用更新更潮的編譯器時，舊的原始碼可能需要整個淘汰。
跟 Flash 檔案、專案型程式、psd、ai 等等的問題一樣，最後一版的 SASS/SCSS 原始檔在誰那？ (當組織只注重人的管理，而不注重資訊跟軟體工程的管理時…)
如果有其他成員直接抓線上的 CSS 檔來改，下次自己要改 SASS 的時候會爆炸。
編譯器更新版本之後，剛剛還可以編譯的檔案突然各種莫名出錯，或是專案組態被改到爛掉，或是 Source Map 對不上 SCSS 的原始碼行數等悲慘情況。
遇到會寫 SCSS，但不會寫 CSS 的朋友：離職後接手別人的 code 才發現這問題，用 SCSS 輕鬆寫出選擇器的效能/效率超差、檔案超大的 css code，可是已經連絡不到他了。
CSS 本身的改版，也導致必須升級過時的編譯器，然後升級編譯器又會發生前述舊的原始碼向下相容的問題。

所以，如果是需要長期維護的專案，採用 CSS 編譯器開發之前，恐怕還需要想一想這些風險。

應該避免的過時語法

https://developer.mozilla.org/zh-TW/docs/Web_%E9%96%8B%E7%99%BC/Historical_artifacts_to_avoid

CSS

Can I use? 線上快查HTML5/CSS3屬性的瀏覽器支援度
https://caniuse.com/

成為 CSS 團隊的一員：CSS 團隊開發的最佳實踐
本文分享了如何最佳化管理與維護日益增加的 CSS 文件內容
無論是對個人還是團隊來說，這點很重要!!!
原文：https://msdn.microsoft.com/en-us/magazine/ff679957.aspx
中文翻譯：http://msdn.microsoft.com/zh-tw/magazine/ff679957.aspx

CSS 版面配置
http://zh-tw.learnlayout.com
https://www.slideshare.net/jaceju/css-1104887

網頁排版 (單欄式、二欄式、三欄式)
http://www.wibibi.com/info.php?tid=405
http://www.wibibi.com/info.php?tid=406
http://www.wibibi.com/info.php?tid=407

CSS 排版兩大利器：Flexbox vs Grid
https://21st.each1.net/2018/11/css-flexbox-vs-grid.html

好用的 css 3新單位 vh vw ─ 讓你的圖片可以隨著螢幕大小而不同
https://pjchender.blogspot.com/2015/04/css-3vh-vw.html

用 CSS的 table屬性取代古早的 table排版
https://www.minwt.com/webdesign-dev/css/6694.html

float 浮動元素 (比如說文字繞著浮動的圖片等應用)
http://www.wibibi.com/info.php?tid=167

常見的 30 種 CSS 選擇器
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048

選擇器中的大於（>）
https://pjchender.blogspot.com/2015/07/css.html

多重選擇器 (包含空白或逗號)
https://pjchender.blogspot.com/2015/03/cssmultiple-selectorsspace.html

CSS 偽元素 ( before 與 after )
http://www.oxxostudio.tw/articles/201706/pseudo-element-1.html

CSS3 :nth-child(n) 選取器教學
http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/

How TO - Toggle Switch 開關切換
https://www.w3schools.com/howto/howto_css_switch.asp
https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp

https://dotblogs.com.tw/knightzone/2013/09/07/116716

使用@keyframes建立動畫內容
animation: name duration timing-function delay iteration-count direction;
animation-name: 動畫名稱;
animation-duration: 動畫作用時間;
animation-timing-function: 動畫補間時運用的計算公式;
animation-delay: 動畫需間隔多久後才開始;
animation-iteration-count: 動畫作用次數;
animation-direction: 動畫作用的方向;

timing-function有linear、ease、ease-in、ease-out、ease-in-out可以用，或者可用cubic-bezier(n,n,n,n)來自己制定(0 <= n <= 1)。

至於iteration-count如果要無限多次可用infinite。

最後動畫作用的方向指的是動作作用的時候可以是@keyframes相反的方向(to->from、100%->0%)(reverse)，或是作用完後又回頭(alternate)、或是先相反再變正常順序(alternate-reverse)。

訂閱：文章 (Atom)

The 21st century