gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:52:19 36 4
gpt4 key购买 nike

我有一个按钮,它使用::after 伪来填充背景。目前它从左到右填充,这在宽度从 0 到 100% 时有意义。但是,我希望它翻转它填充的方式。

a.project--link {
margin: 2rem auto 0 auto;
padding: 1rem 0;
display: block;
border: 1px solid black;
box-shadow: 0 0 10px rgba(red, .2);
width: 100%;
transition: all .2s ease;
z-index: 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 {
display: block;
content: '';
height: 100%;
width: 0;
top: 0;
z-index: -1;
background-color: red;
position: absolute;
}

a.project--link:hover::after {
width: 100%;
transition: .3s linear;
}
<a href="#" class="project--link">View Project</a>

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

最佳答案

使用transform: scaleX()代替width,并使用transform-origin来控制方向。

a.project--link {
margin: 2rem auto 0 auto;
padding: 1rem 0;
display: block;
border: 1px solid black;
box-shadow: 0 0 10px rgba(red, .2);
width: 100%;
transition: all .2s ease;
z-index: 1;
position: relative;
}

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 {
display: block;
content: '';
height: 100%;
top: 0;
width: 100%;
z-index: -1;
background-color: red;
position: absolute;
transition: .3s linear;
transform: scaleX(0);
transform-origin: 100% 0;
}

a.project--link:hover::after {
transform: scaleX(1);
}
<a href="#" class="project--link">View Project</a>

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

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com