html 开始过渡对边界半径的影响

gg0vcinb 于 2024-01-04 发布在其他

关注(0)|答案(2)|浏览(216)

我在一个元素上设置了一个过渡，但是效果开始于我设置的边界半径之外。
我希望效果从边框内开始。

#login-now {
    position: relative;
        font-size: 18px;
        color: white;
        background-color: #00a295;
        padding: 13px 94px 13px 94px;
        border-radius: 10px;
        line-height: 2.5;
}
#login-now-text {
    position: relative;
    z-index: 2;
}
#login-now:after{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
        content: "";
        border-radius: 10px;
        background-color: #007d73;
        transition: all .35s;
}
#login-now:hover:after{
    width: 100%;
}

个字符
图像来源：https://imgur.com/a/LEv1kmb
我尝试添加ease-in并将top的值设置为另一个数字，但这对我不起作用。

Html

来源：https://stackoverflow.com/questions/77712430/start-transition-effect-on-border-radius

2条答案

按热度按时间

8iwquhpp1#

你可以使用overflow:hidden来隐藏任何落在边界之外的福尔斯。但是你的<a>标签必须是一个块。然后你也可以在悬停效果上删除border-radius。

#login-now {
  position: relative;
  font-size: 18px;
  color: white;
  background-color: #00a295;
  padding: 13px 94px 13px 94px;
  border-radius: 10px;
  line-height: 2.5;
  display: inline-block;
  overflow: hidden;
}

字符串

赞(0）回复(0）举报 2024-01-04

vuktfyat2#

或者，您可以使用clip-path属性来裁剪按钮边框之外的所有内容。

#login-now {
  position: relative;
  font-size: 18px;
  color: white;
  background-color: #00a295;
  padding: 13px 94px 13px 94px;
  border-radius: 10px;
  line-height: 2.5;
  clip-path: border-box;
}
#login-now-text {
  position: relative;
  z-index: 2;
}
#login-now:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  content: "";
  border-radius: 10px;
  background-color: #007d73;
  transition: all .35s;
}
#login-now:hover:after {
  width: 100%;
}

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-04

我来回答

html 开始过渡对边界半径的影响

2条答案

相关问题

热门标签

最新问答