# U10 CodePen

漢堡選單
---
+ [漢堡選單的三條線](/N0cZTB4NSVGbUlDvKSzSEg)

表格
---
+ [顯示部分 tr 的表格 RWD2](/1o6B-ZngQy6Fv4ADNLedgw)
+ [position: sticky (1)](/ZNdjJl8WTlao3tV2TIuyMQ)

圖片輪播
---
+ [輪播圖](/wl5YNkgIRU2pmGzHf6T9Iw)
+ [圖片輪播＋時間軸＋文字](/WL54NsBUTH-AwcePl3Ph2Q)
+ [圖片輪播＋時間軸＋文字2](/Hv4SfL0PSdy0YvcjhSyLXA)
+ [Voyage Slider | GSAP](/N8UNIHaERJ2h5WFl548UaA)

表單
---
+ [Checkbox and Radio Styling](/Vnaq3QXiRqiXQ7AjQjc17w)
+ [模擬多選下拉選單](/Sj1bFDASSv2pTe2tQzMglA)
+ [開關](/8Je9C77nR06FJHHx6WRg_g)
+ [select後帶入勾選的項目](/5i0LeUVgR8W-eMWpZgJ50w)

頁籤Tabs
---
+ [頁籤與內容分開寫](/WQBdEQ7vTQ2CuXYOvk_2Zg)
+ [Slide Tabs](/yxqKWsC9TkSEXJva6kT6Pw)
+ [tabs 2021](/7fnt7elMTsOpd7sgX-ouTg)

日曆、時間
---
+ [時間表模板](/UAB3sYK_T62iQ0NHN2LArQ)
+ [日曆檢視](/qOEe7tXyThCTIicM-cBTBg)
+ [預約行事曆](/wCNgi7YaQ_OXvKNlEgoqNQ)
+ [抓系統時間的時鐘](/TTfj0WczRuaJpfwxg0ZaMg)
+ [css 動畫時鐘](/n0Wmrl27SnyNBMbGeGVpEA)

文字設定、排版
---
+ [打字效果](/ht-JxAsCSk2nAXiD22lCVg)
+ [橫書文字加注音](/z2brViB6QeiB5tdaFQobqg)
+ [本文直書加注音](/PksWZZcVQh6SZi7kptKIig)
+ [Ruby: 注音符號排版練習](/hYV8SlT8RfSRDYoVoIRD9Q)
+ [blotter.js API](/EC7jPKPNSN2ZvBU8FGyLIw)
+ [文字多行刪節號，但ie不吃](/EnGrSujQQziHi94SHR7ZPw)
+ [文字漸變色](/wvRDVdF7SAii28ew4MAdnA)

Accordion/收合式選單
---
+ [收合時顯示部份內容的區塊](/Ke3uC0CsSwKdXFW9NG1qYA)
+ [li_slide](/L-OSU67OSXi61qVdMNC6Mg)
+ [後分類展開收合](/u8z8LNYSS4O5Xx0GgXO3eQ)
+ [ＱＡ](/RmhlPk8JT3SBCXMYLYtKiQ)
+ [集合式功能圖示](/niyOg9GPQC24G_jUt5oJBA)
+ [Footer 在視窗或文件最下方](/xfvadMVeThKtRQgA6GS-Pg)

選單
---
+ [ScrollTop+偏移練習](/GK_Z0TY9RHWodYtKOrdkCw)
+ [Scroll側邊選單](/KbiV4pJoT76WqUr1yn4V1g)

圖片排版
---
+ [Data Grid View](/aarxZ9LVTQyGl1EIBWihOw)
+ [一大圖八小圖的排版](/dMMLEgjoQlmFMSShSA01Aw)
+ [一大四小圖排版](/sb8NHOu4TN-QR5IosAk7oA)

燈箱
---
+ [旁邊滑入的燈箱](/RaDbsvXMS-iIClCztSsl5g)

步驟樣式
---
+ [step sample 01](/SRDIOqS5Qp2GrTzrzlHAIQ)

Scroll 頁面
---
+ [scroll Top and Bottom](/0jOsFVhSQEKrVVkqwOzozg)
+ [Demo: CSS scroll down button](/YgPhlhDdSKyy33omcihqcg)
+ [Next DIV scrollTop](/JQ3IGA4US7iExWVBl9-kdA)
+ [Header/Footer Parallax Effect](/nH1hZyBbSp2xHpIrWaVVfQ)
+ [Full Page Parallax Scroll Effect](/l4zjWL84QCyyj14eC5urXg)
+ [Horizontal Scroll with GSAP and ScrollMagic](/fWNh0yVXS0e--oWFjdByTQ)

background圖片效果設定
---
+ [霧面玻璃效果](/f0H5rN1zSCuVnteDmuXsQw)
+ [純CSS模糊背景](/b87xEy2CSuOHZIdcfkBFlQ)
+ [主頁 vimeo 背景](/O9ly1fPXTFedeVlOoKdCKw)
+ [youtube background](/YHni9M-tSoG4KAerO-n7XA)
+ [mix-blend-mode（PS 圖層混合模式）](/ou8n8eklRu6trI3knDe-pw)

Sticky block
---
+ [Sticky Table Headers with CSS](/5LkgrYntRrCqfYidGVYVaw)
+ [position: sticky](/NULPkx1lSTCOUxyE3JpR-g)
+ [固定在右下的元件，不超過 Header 和 Footer](/QaK6qbU7RHCcWp1MuzAr2w)
+ [天花板與地板](/KCIbGnebQDCDRm_f5KnIGA)

回饋動態 (hover效果)
---
+ [hover animate](/M7TgWMcjSP6Fqzcvb1HUOw)
+ [hover with parallax](/tX_ZWfoDSvaj56qcvVt5Dw)
+ [Fancy 3D flip card (on hover - CSS)](/C56v8kGVRQqTMQwglu_0eQ)

###### tags: `U10 CodePen`

<style>

.summary h1 {
font-size: 28px;
color: #08b2ff;
}
.summary h2{
font-size: 18px;
}

.nav>li>a{
padding:5px 15px;

}
.summary .nav>li>a {
font-size: 16px;
letter-spacing:0
}
.navbar-header{
margin-left:10px;
}
h2{
color:#0e86ab;
}
</style>