就是以下这个标签的效果。求解答。
审查元素
其实原理很简单，标签由两层组成，上层白底显示文字，下层div等高+1有边框带transition，默认下层宽度0，鼠标移入时宽度为上层宽度+1,贴demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.wrap{
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
width: 100px;
height: 30px;
margin: auto;
display: inline-block;
cursor: pointer;
}
.label{
margin: 1px;
width: 100px;
height: 30px;
line-height: 30px;
border-radius: 10px;
background: #ddd;
position: relative;
z-index: 2;
box-sizing: border-box;
padding: 0 10px;
}
.border{
position: absolute;
width: 0;
height: 32px;
top: 0;
left: 0;
border-radius: 10px;
transition: .5s;
visibility: hidden;
overflow: hidden;
}
.border-inner{
border: 1px solid rgb(76, 142, 250);
width: 100px;
height: 30px;
border-radius: 10px;
}
.wrap:hover .border{
visibility:visible;
width: 102px;
}
.wrap:hover { animation: box-shadow-3 .5s 1;}
@keyframes box-shadow-3{
from{box-shadow:inset 0 0 75px 75px rgb(76, 142, 250), 0 0 0 rgb(76, 142, 250)}
to{box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent}
}
</style>
</head>
<body>
<div class="wrap">
<div class="label">
aa
</div>
<div class="border">
<div class="border-inner">
</div>
</div>
</div>
</body>
</html>
来个地址？ 这个肯定是看得到的， 屏截图我估计就是hover动画。有border-radius 动画border从只有左边有到全有。