H 21 ＆22 chapter hover效果＋偽類選擇器＋時間軸 transform位置變化

偽類選擇器&偽元素選擇器 ( <a,  .按鈕: hover/ active, before, after)

預設值是inline 如果要變更尺寸 需加入 display:inline-block 

☝偽類選擇器

用于定义元素的特殊状态。

例如

滑鼠移入顏色改變的效果 .btn:hover{ color: red;} 

滑鼠點擊顏色改變的效果 .btn:active{ color: #ff9b29;}

✌偽元素選擇器

只有在css寫入 在html沒有 也可在網頁生成元素

eg:

.btn:before{

                   content:"可在這輸入文字";

如果要使用偽元素作線條 content裡面的”“可以不用寫內容 但是要寫content:"";

例如

btn 設定顏色 尺寸 字形 大小 周遭範圍大小（padding)

.btn:before{

                  content:"";

                  width :100%; (與父層定位同寬）

                  height: 3px;

                 backfround-color: #ff9b19;

                 display: inline-block;

                 position: absolute; ( 以父層做定位）

                top/ bottom: 0;

                left: 0;  /50% (對齊 定位父層從中間向左延伸％50)

                transition: width 0.3s; （寫的位置在線條設定中  transition 屬性 時間 顯示的過渡變化 ）

👉 結合hover 移入按鈕前後 線條顯示效果

.btn:before/after{ （移入按鈕前線條設定）

                  content:"";

                  width :0%; (不顯示）

                  height: 3px;

                 backfround-color: #ff9b19;

                 display: inline-block;

                 position: absolute; ( 以父層做定位）

                top/ bottom: 0;

                left: 0;     

.btn:hover:before/after{ 

                 width :100%; (顯示）

transition 屬性 時間 顯示的過渡變化

例如 寬度的變化

transition: width 0.3s;

transform 屬性 物體本身變形 例如 線條從中間往左右延伸

＋transform: translatex(左右）/y(上下）-50%