Как создать границу на основе цвета фона в круге div?
Вопрос
Я попытался создать круг, который 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;
}