css3动画 - B站标签的这个CSS效果是怎么做的?
本文介绍了css3动画 - B站标签的这个CSS效果是怎么做的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
就是以下这个标签的效果。求解答。
解决方案
其实原理很简单,标签由两层组成,上层白底显示文字,下层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>
这篇关于css3动画 - B站标签的这个CSS效果是怎么做的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文