html - 悬停过渡不起作用

因此，我最近一直在从事一个项目，而我应用于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

谢谢

最佳答案

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

.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>