Question

我一直试图在我的页面中的某些按钮悬停时执行动画。我写了下面的CSS来实现这个目标：

#B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
}

动画应该在位于页面底部黑色div的按钮底部加载一个小条，但是，我的动画不起作用。是什么导致了这个问题？

https://codepen.io/Feners4/pen/KggAwg

Answer 1

当您将鼠标悬停在元素上时，您需要提供宽度来显示条形。

使用下面的css来获得所需的结果。

(append-to-file "here I come to save the day\n" nil (getenv "MY_TTY"))

笔：https://codepen.io/anon/pen/LxYEdX

Answer 2

鼠标悬停后您没有设置条形样式值。

当您将鼠标悬停在按钮上时，按钮中的条形宽度将更改为100％。

请在{width：100％;} ＆＃34;在＃B1和＃B2

Codepen：http://codepen.io/onyoon7/pen/rjNaov

#B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
  &:hover:after {
    width: 100%;
  }
}

#B2 {
  margin: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  } 
  &:hover:after {
    width: 100%;
  }
}

CSS按钮动画不起作用

2 个答案: