视频效果
炫酷按钮
思路: 大致实录就是将盒子里边的before倾斜变形,使其变成一个平行四边形的效果,然后将其缩小隐藏,在放大,添加过渡时间就会出现如图所示的效果
代码:
<!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>炫酷按钮</title>
<style>
/* 将body设置为视口的大小 */
body{
width: 100vw;
height: 100vh;
background-color:#2c3e50 ;
/* 将main居中 */
display: flex;
justify-content: center;
align-items: center;
}
/* 为main加上边框 */
main{
border: 2px solid #d35400;
width: 150px;
height: 50px;
/* 同样设置为弹性布局将div居中 */
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
position: relative;
overflow: hidden;
}
/* 通过main里的before实现一个效果 */
main::before{
content: "";
width: 0;
height: 100%;
position: absolute;
background-color: brown;
/* 将其环绕x轴倾斜45deg */
transform: skewX(45deg);
/* 设置层次 */
z-index: -1;
transition: 1s;
}
/* 当悬浮到main上面时将before显示出来 */
main:hover:before{
width: 150%;
}
</style>
</head>
<body>
<main>
<div>
莞工杰仔
</div>
</main>
</body>
</html>
要掌握的知识点:
- 倾斜变形:skew()
- 缩放:scale()