[toc] ## 由中間向兩邊伸縮 初始大小與位置 ``` position:absolute; content: ''; display:block; width:0; border:1px solid rgba(255,255,255,1); margin-left:50%; left:0; ``` hover時 ``` width:100%; //向右(看起來是，其實是向左速度的兩倍，但因為整體向左偏移...) margin-left:0; //向左 ``` ## 光斑效果？（光條換過玻璃） 需要嵌一個子元素，子元素為要顯示的內容，需將其z-index提升 在父元素上創建一個偽類，做光斑。 矩形，`rotate(35deg)`左右，再用`left/top負值`將它隱藏（通過父元素`overflow:hidden`）,hover時再讓它通過`left正值`向右滑過。 貝塞爾曲線參考 ``` transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); ``` ## 平面立體按鈕 hover時收斂陰影（雙陰影變單層細陰影）并加深（變黑），字體顏色加深+字體內陰影，按鈕背景色加深，邊框加深（變黑） ``` .btn-3 { box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24; background: #e3403a; border: 1px solid #da251f; font-weight: 900; letter-spacing: 1px; -webkit-transition: all 150ms linear; transition: all 150ms linear; } .btn-3:hover { box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); background: #e02c26; border: 1px solid rgba(0, 0, 0, 0.05); text-shadow: -1px -1px 0 #c2211c; color: #ec817d; text-decoration: none; -webkit-transition: all 250ms linear; transition: all 250ms linear; } ``` ## 擴散效果 通過outline,outline-offest，并讓outline逐漸透明。 hover時，button內部產生侵蝕效果（通過大數值模糊半徑，水平垂直陰影為0，光是模糊半徑） ``` .btn-5 { border: 0 solid; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0); outline: 1px solid; outline-color: rgba(255, 255, 255, 0.5); outline-offset: 0px; text-shadow: none; -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); } .btn-5:hover { border: 1px solid; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2); outline-color: rgba(255, 255, 255, 0); outline-offset: 15px; text-shadow: 1px 1px 2px #427388; } ```