悬停过渡不起作用

Question

所以我最近一直在做一个项目，我应用到 div 的转换不起作用。不知道为什么！

这是CSS代码

.stats .box {
  background-color: rgba(255, 255, 255,0.07);
    color: white;
    padding: 40px 0;
    text-align: center;
    transition: 0.7s all ease-out;
    margin: 20px 0;

}

.stats h2 {
    margin: 25px 0 10px 0;
  font-size: 35px;
  font-family: "Montserrat";
  color: rgb(255, 255, 255);
  text-transform: uppercase;
letter-spacing: 2px;
    font-weight: 200;
}

.stats h4 {
    font-weight: 100;
    font-size: 15px;
}

.stats .box:hover {
    background-image: -moz-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%);
    background-image: -webkit-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%);
    background-image: -ms-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%);
    transition: 0.7s all ease-out;
}

这是 HTML 代码

<div class="col-sm-6">
<div class="box">
    <h2>4326</h2>
    <h4>Lines of Code</h4>
</div>

如果您想现场观看，这里也是 CodePen http://codepen.io/PlatoCode/pen/qadvZV

谢谢

Answer 1

过渡不支持渐变动画，你唯一能做的就是使用不透明度

.box {
  background-color: rgba(255, 255, 255, 0.07);
  color: black;
  padding: 40px 0;
  text-align: center;
  transition: 0.7s all ease-out;
  margin: 20px 0;
  position: relative;
}
h2 {
  margin: 25px 0 10px 0;
  font-size: 35px;
  font-family: "Montserrat";
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 200;
  z-index: 2;
}
h4 {
  font-weight: 100;
  font-size: 15px;
  z-index: 2;
}
.box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.7s all ease-out;
  opacity: 0;
  background-image: -moz-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%);
  background-image: -webkit-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%);
  background-image: -ms-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%);
  z-index: -1;
}
.box:hover:after {
opacity: 1;
  }

<div class="col-sm-6">
  <div class="box">
    <h2>4326</h2>
    <h4>Lines of Code</h4>
  </div>