[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; } ```