Warning: Undefined array key "adf" in /www/wwwroot/blog.5iux.cn/wp-content/plugins/rejected-wp-keyword-link-rejected/wp_similarity.php on line 41
Warning: Undefined array key "sim_pages" in /www/wwwroot/blog.5iux.cn/wp-content/plugins/rejected-wp-keyword-link-rejected/wp_similarity.php on line 42
原理很简单：
就是给两个空标签用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效果：
