css過渡效果展示

<style type="text/css">

.content_list li{
    width: 330px;
    height: 160px;
    background-color: #FF6440;
    position: relative;
    float: left;

    margin-right: 24px;
    overflow: hidden;
}
ul:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}    

.content_list li .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000;
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.content_list li:hover .mask {
    opacity: .4;
}
</style>

<div>
    <ul class="content_list">
    <li>
       <span>opacity不透明度與transition過度的使用案例</span>
      <div class="mask"></div>
    </li>
  </ul>
</div>

效果：

 

• opacity不透明度與transition過度的使用案例