圆形收缩显示图像效果
<!doctype html>
<html>
<head>
<style>
div{width:300px;height:300px;border-radius:50%;overflow:hidden;position:relative;}
div img{width:100%;height:100%;}
div span{position:absolute;left:0;top:0;width:100%;height:100%; border-color:black; border-style:solid;border-width:150px;box-sizing:border-box;border-radius:50%;opacity:0.6;}
div span{-webkit-transition:border 1s;}
div:hover span{border-width:0;}
</style>
<meta charset="UTF-8">
<title>圆形收缩显示图像效果</title>
</head>
<body>
<div>
<img src="head.jpg">
<span></span>
</div>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2016-10-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
