鼠标悬浮缓慢放大出现播放按钮

<div class="imgwrap">
        <img src="http://p.qpic.cn/music_cover/aaxX4Babic4VicBPicJOwr5xtdEPHbjFCkxsPIZm7kk3ZehX0N4OdMCSQ/300?n=1">
        <i class="playbtn"></i>
</div>
.imgwrap {
        width: 200px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    
.imgwrap img {
        width: 200px;
        height: 200px;
        display: block;
        transform: scale(1) translateZ(0);
        transition: transform .75s;
  }
    
 .playbtn {
        width: 50px;
        height: 50px;
        opacity: 0;
        transition: opacity .75s;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -25px 0 0 -25px;
        background: url(../assets/img/bofang.png) center center no-repeat;
        background-size: 50px auto;
        border-radius: 50%
    }
    
.imgwrap:hover .playbtn {
        opacity: 1;
        transition: opacity .75s
  }
    
.imgwrap:hover img{
        transform: scale(1.2);
        transition: transform .75s
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容