cuốn sách gpt4 ai đã làm

html - 如何从右到左为元素宽度设置动画::之后?

In lại Tác giả: Walker 123 更新时间:2023-11-28 03:52:19 36 4
mua khóa gpt4 Nike

我有一个按钮,它使用::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

如果有人能阐明如何翻转动画,那将是一个巨大的帮助。

câu trả lời hay nhất

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

关于html - 如何从右到左为元素宽度设置动画::之后?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43663498/

36 4 0
Đề xuất bài viết: javascript - 使用 dataTables dom 定位元素
Đề xuất bài viết: Jquery 验证在提交时丢失样式
Đề xuất bài viết: Jquery 移动输入覆盖
Đề xuất bài viết: html - 导航栏和页面顶部之间的间隙
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress