我有一个按钮,它使用::after 伪来填充背景。目前它从左到右填充,这在宽度从 0 到 100% 时有意义。但是,我希望它翻转它填充的方式。
a.project--link {
margin: 2rem auto 0 auto;
padding: 1rem 0;
hiển thị: khối;
đường viền: màu đen đặc 1px;
box-shadow: 0 0 10px rgba(red, .2);
chiều rộng: 100%;
transition: all .2s ease;
chỉ số z: 1;
}
a.project--link:hover {
box-shadow: 0 0 10px rgba(red, .7);
transform: scale(1.02);
transition: all .2s ease;
}
a.project--link::after {
hiển thị: khối;
nội dung: '';
chiều cao: 100%;
chiều rộng: 0;
trên cùng: 0;
chỉ số z: -1;
màu nền: đỏ;
vị trí: tuyệt đối;
}
a.project--link:hover::after {
chiều rộng: 100%;
transition: .3s linear;
}
View Project
如果有人能阐明如何翻转动画,那将是一个巨大的帮助。
sử dụngtransform: scaleX()
thay thếchiều rộng
,并使用transform-origin
来控制方向。
a.project--link {
margin: 2rem auto 0 auto;
padding: 1rem 0;
hiển thị: khối;
đường viền: màu đen đặc 1px;
box-shadow: 0 0 10px rgba(red, .2);
chiều rộng: 100%;
transition: all .2s ease;
chỉ số z: 1;
vị trí: tương đối;
}
a.project--link:hover {
box-shadow: 0 0 10px rgba(red, .7);
transform: scale(1.02);
transition: all .2s ease;
transform-origin: 0 100%;
}
a.project--link::after {
hiển thị: khối;
nội dung: '';
chiều cao: 100%;
trên cùng: 0;
chiều rộng: 100%;
chỉ số z: -1;
màu nền: đỏ;
vị trí: tuyệt đối;
transition: .3s linear;
transform: scaleX(0);
transform-origin: 100% 0;
}
a.project--link:hover::after {
transform: scaleX(1);
}
View Project
Tôi là một lập trình viên xuất sắc, rất giỏi!