题
我试图创建一个圆圈 border
应该看起来与div颜色相同的颜色以及边框和div之间的空格。之间的空间应该显示它所在的div的背景颜色。背景颜色是可变的,所以我们不应该硬编码它。
相反,我给了透明度使用 rgba
模式。所有工作都很好我试图在圆圈的悬停上获得这种效果,但我无法获得悬停,因为我试图 display:block
在悬停和正常状态下,它是 display:none;
这是为了after选择器,因此我尝试了after选择器的这种效果。
密码 CSS
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover + .main:after{
display:block;
}
.main:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:3px;
left:3px;
display:none;
}
body{
background-color:#888;
}
HTML格式
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
解决方案
套装 position:relative;
致 .main
并设置 left/right/top/bottom
的 .main:after
到零并添加 transition:all ease 0.3s
用于动画。
在 .main:hover:after
改变 left/right/top/bottom
到 -5px
.
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
position:relative;
margin:6px;
}
.main:after{
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:0px;
left:0;
bottom:0;
right:0;
transition:all ease 0.3s;
}
.main:hover:after{
top:-5px;
bottom:-5px;
right:-5px;
left:-5px;
}
其他提示
只需添加 .main:hover:after
以显示为 block
在悬停 工作小提琴
.main:hover:after{
display:block;
}
尝试这样的事情
CSS :
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:111;
top:3px;
left:3px;
}
body{
background-color:#888;
}
HTML格式 :
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
您可以使用box-shadow代替伪元素 :http://jsfiddle.net/Ku6BQ/24/
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover {
box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff;
}
body {
background-color:#888;
} 如果您将其透明并显示在渐变或图像后面,您仍然可以使用box-shadow : http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/
.main {
width:80px;
height:80px;
border-radius:100%;
box-shadow:inset 0 0 0 100px #007eff;
text-align:center;
line-height:80px;
}
.main:hover {
border:4px transparent solid;
margin:-4px;
box-shadow: 0 0 0 2px #007eff,
inset 0 0 0 100px #007eff;;
}
html {
background :#888 url(http://lorempixel.com/200/200/nature) repeat;
height:100%;
}
一个改进(只是为了记录)他的想法一个盒子阴影由GCyrillus应用
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
border: solid 4px transparent;
background-clip: padding-box;
box-shadow: 0 0 0 0px white;
-webkit-transition: all 1s;
transition: all 1s;
}
.main:hover {
box-shadow: 0 0 0 6px #007eff;
}
body {
background-color:#888;
}
不隶属于 StackOverflow