CSS按钮悬停动画是如何工作的？
CSS按钮悬停动画是如何工作的？
提问于 2018-07-31 11:37:10
我试图理解这些代码块的按钮悬停效果，但仍然困惑。
我可以理解当鼠标放在.btn:hover::after启动的按钮上并显示背景按钮(z=-1)，然后用transform: scaleX(1.4) scaleY(1.6);将其展开
但是当鼠标指针从按钮上移开时，背景按钮也会产生“缩小”的效果，看起来像是从transform: scaleX(1.4) scaleY(1.6);变成了正常的大小。我就是不明白是哪行代码控制了这个鼠标离开的动画。
.btn:link,
.btn:visited {
position: relative;
border-radius: 10rem;
display: inline-block;
margin-top: 6rem;
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
transition: all 0.2s;
}
.btn:hover {
transform: translateY(-.3rem);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}
.btn:active {
transform: translateY(-.1rem);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.btn--white {
background-color: #fff;
color: #777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
.btn--white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}回答 1
Stack Overflow用户
发布于 2018-07-31 11:49:24
秘诀在于按钮的:link / :visited中的transition: all 0.2s。不仅将in转换为目标状态，还将out从转换为目标状态。从本质上讲，是transition控制着你所看到的动画的两边。
应用实际偏移量的仍然是，但无论是否应用transform，transition都负责平滑地来回淡入淡出--如果没有transition，动画只会在两个状态之间“跳转”。
body {
background: black;
}
.btn:link,
.btn:visited {
position: relative;
border-radius: 10rem;
display: inline-block;
margin-top: 6rem;
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
transition: all 0.2s;
}
.btn:hover {
transform: translateY(-.3rem);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}
.btn:active {
transform: translateY(-.1rem);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.btn--white {
background-color: #fff;
color: #777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
.btn--white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}<a href="#" class="btn btn--white">Button</a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51605110
复制相关文章
相似问题
腾讯云开发者
