天猫店铺css实现鼠标滑过水波效果-韩都类目动效

 

 

原理很简单:

就是给两个空标签用border-radius设置圆形描边,通过transition控制透明度和描边粗细实现。

 

CSS部分:

 

.water{width:165px; height: 240px; padding: 10px; border-radius: 10px; cursor: pointer; margin:200px auto; background: #555; }
.water .img { float: left; width:165px; height: 165px; border-radius: 50%; overflow: hidden; position: relative;}
.water .img img{position: relative; z-index: 10;}
.water .img i{ display: block; position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border: 20px solid #fff; width: 2px; height: 2px; border-radius: 50%; }
.water:hover .img i{ border-width: 0px; width:165px; height: 165px; z-index: 20; opacity: 0; transition: 0.3s all linear;}
.water .img b{ display: block; position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border: 10px solid #ddd; width: 2px; height: 2px; border-radius: 50%; }
.water:hover .img b{ border-width: 0px; width:165px; height: 165px; z-index: 20; opacity: 0; transition: 0.5s all linear;}
.water .btm { float: left; width:165px; margin-top: 15px; line-height: 30px; text-align: center; color: #ddd; font-size: 14px;}
.water .btm span{font-size:24px; color: #fff; height: 30px; overflow: hidden; display: inline-block;}

 

Html部分:

<div class="water">
    <div class="img"><i></i><b></b>
    	<img src="123.jpg" alt=""></div>
        <div class="btm">
            <span>羽绒服</span><br>两件X折
    </div>
</div>

 

demo效果:


>>点击查看<<

 

D.Young

85后 / 代码散修 / 平面设计 / 一个老父亲 / 直男 / 被认为胖

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

微信扫一扫,分享到朋友圈

天猫店铺css实现鼠标滑过水波效果-韩都类目动效
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close