作者:北京超凡传媒 | 来源:互联网 | 2023-05-23 17:37
这是一个雪佛龙:
.shape {
height: 200px;
width: 300px;
position: absolute;
overflow: hidden;
}
.shape:before, .shape:after {
content: "";
position: absolute;
width: 150px;
height: 120px;
background: red;
top: 10px;
}
.shape:before {
transform-origin: 0% 100%;
transform: skewY(20deg);
}
.shape:after {
transform-origin: 100% 100%;
transform: skewY(-20deg);
right: 0;
}
我基本上需要创建的是:
我们如何在悬停时拉伸雪佛龙?
1> Terry..:
稍微不同的方法:使用rotate + translate而不是使用skew:
.shape {
height: 200px;
width: 260px;
position: absolute;
overflow: hidden;
}
.shape::before, .shape::after {
border-radius: 20px;
content: "";
position: absolute;
width: 150px;
height: 40px;
background: red;
top: 50%;
transition: all .25s ease-in-out;
}
.shape::before {
transform-origin: 50% 50%;
transform: rotate(20deg);
}
.shape::after {
transform-origin: 50% 50%;
transform: rotate(-20deg);
right: 0;
}
.shape:hover::before {
transform: translateX(15px) rotate(45deg);
}
.shape:hover::after {
transform: translateX(-15px) rotate(-45deg);
}