效果展示
代码部分
html
<button>Click</button>
css基础样式
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-size: 10px; background-color: #ccc; } button { width: 40rem; height: 15rem; background-color: black; color: white; border: none; border-radius: 3rem; font-size: 9rem; font-weight: 700; cursor: pointer; transition: all .2s; } button:hover { color: rgb(0, 0, 0); }
重点部分 css
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思
语法
transform: scaleX(x); /*沿X轴方向缩放*/ transform: scaleY(y); /*沿Y轴方向缩放*/ transform: scale(x, y); /*沿X轴和Y轴同时缩放*/
demo
在CSS3中，我们可以使用transform属性的skew()方法来实现元素的2D旋转效果
语法
transform: skewX(x); /*沿X轴方向旋转*/ transform: skewY(y); /*沿Y轴方向旋转*/ transform: skew(x, y); /*沿X轴和Y轴同时旋转*/
demo
现在你应该理解了这两个属性，那么思路就是我们先利用伪元素结合定位以及 skew 属性写出来一个平行四边形，然后再利用 scale 设置 X轴缩放为0，最开始是看不见的，放鼠标放上去之后再把 scale 设置 X轴缩放为1 ，显示出来，再加上过渡 transition ，但是还有点问题，就是有溢出等等，小问题，解决一下，OK，开始了
首先先给button添加相对定位，好让伪元素根据它进行绝对定位，设置z-index为1，层叠较高，设置溢出时隐藏
position: relative; z-index: 1; overflow: hidden;
接下来就是 button 的伪元素，注意设置z-index
button:after { /*这个属性必须有*/ content: ""; background: white; /*绝对定位，相对于button*/ position: absolute; z-index: -1; /*这样就能再显示结束时不会看到多余的部分*/ left: -20%; right: -20%; top: 0; bottom: 0; /*这里demo演示过，思路也在上面说过*/ transform: skewX(-45deg) scale(0, 1); /*添加过度 0.5s*/ transition: all 0.5s; }
当鼠标放到button上时 ，scale(1, 1)
button:hover:after { transform: skewX(-45deg) scale(1, 1); }
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css按钮特效</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-size: 10px; background-color: #ccc; } button { width: 40rem; height: 15rem; background-color: black; color: white; border: none; border-radius: 3rem; font-size: 9rem; font-weight: 700; cursor: pointer; transition: all .2s; position: relative; z-index: 1; overflow: hidden; } button:hover { color: rgb(0, 0, 0); } button:after { content: ""; background: white; position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0; transform: skewX(-45deg) scale(0, 1); transition: all 0.5s; } button:hover:after { transform: skewX(-45deg) scale(1, 1); } </style> </head> <body> <button>Click</button> </body> </html>
