#css #user-interface #button #icons #border
#css #пользовательский интерфейс #кнопка #Значки #граница
Вопрос:
есть ли способ, чтобы содержимое внутри рамки оставалось на своем месте, пока ширина границы рамки в фоновом режиме меняется? Я использую переключатели для карусели, и теперь я украшаю ее, чтобы она выглядела как кнопки коробки. В настоящее время у меня левая граница превращается в правую границу (например, открываются ящики), но затем значки (содержимое, которое я разместил внутри «кнопок коробки») перетаскиваются, пока границы перемещаются. Я хочу, чтобы оно оставалось на месте, смотря на то, как оно находится при наведении, поэтому я попытался использовать:before для границ, но тогда это не сработало.
[class^="panel_"] {
overflow: auto;
position: relative;
width: inherit;
height: inherit;
padding: 8%;
}
[class^="label_"] {
display: flex;
margin: 5px;
width: 32px;
height: 32px;
line-height: 32px;
justify-content: center;
align-items: center;
color: #c5c8d3;
background-color: transparent;
border: 1.5px solid #c5c8d3;
border-style: none none none solid;
transition: all 0.5s ease;
}
[class^="label_"]:hover {
color: #496676;
background-color: transparent;
border-color: #c5c8d3;
}
#button_home:checked~#navigation .label_home,
#button_compilation:checked~#navigation .label_compilation,
#button_about_me:checked~#navigation .label_about_me,
#button_code:checked~#navigation .label_code {
border-style: solid solid solid none;
animation: tab 1s ease-in-out forwards;
}
@keyframes tab {
from {
width: 0px;
background-color: transparent;
border-color: #c5c8d3;
color: #496676;
}
to {
width: 32px;
color: #496676;
background-color: #fff2f2;
border-color: #496676;
}
} <head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
</head>
<body>
<input hidden type="radio" name="carousel-control" id="button_home" checked />
<input hidden type="radio" name="carousel-control" id="button_compilation" />
<input hidden type="radio" name="carousel-control" id="button_about_me" />
<input hidden type="radio" name="carousel-control" id="button_code" />
<div id="navigation">
<label for="button_home" class="label_home"><span class="th th-heart-1-o"></span> </label>
<label for="button_compilation" class="label_compilation"><span class="th th-folder-3-o"></span></label>
<label for="button_about_me" class="label_about_me"><span class="th th-eyelash"></span></label>
<label for="button_code" class="label_code"><span class="th th-code"></span></label>
</div>
</body> Комментарии:
1. Вы имеете в виду, что вы просто хотите, чтобы анимация работала на границах, а не на значке внутри него?
2. да, но я думаю, что теперь я это понимаю
Ответ №1:
Используйте псевдоэлемент:
[class^="label_"] {
display: flex;
margin: 5px;
width: 32px;
height: 32px;
line-height: 32px;
justify-content: center;
align-items: center;
color: #c5c8d3;
position:relative;
overflow:hidden;
}
[class^="label_"]::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-color: #fff2f2;
border: 1.5px solid #496676;
border-left:0;
transition: all 0.5s ease;
transform:translateX(calc(1.5px - 100%)); /* hide all the element and show only one border */
}
[class^="label_"]:hover {
color: #496676;
background-color: transparent;
border-color: #c5c8d3;
}
#button_home:checked~#navigation .label_home::before,
#button_compilation:checked~#navigation .label_compilation::before,
#button_about_me:checked~#navigation .label_about_me::before,
#button_code:checked~#navigation .label_code::before {
transform:translateX(0); /* show the element on click */
}
#button_home:checked~#navigation .label_home,
#button_compilation:checked~#navigation .label_compilation,
#button_about_me:checked~#navigation .label_about_me,
#button_code:checked~#navigation .label_code {
color:#496676;
} <head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
</head>
<body>
<input hidden type="radio" name="carousel-control" id="button_home" checked />
<input hidden type="radio" name="carousel-control" id="button_compilation" />
<input hidden type="radio" name="carousel-control" id="button_about_me" />
<input hidden type="radio" name="carousel-control" id="button_code" />
<div id="navigation">
<label for="button_home" class="label_home"><span class="th th-heart-1-o"></span> </label>
<label for="button_compilation" class="label_compilation"><span class="th th-folder-3-o"></span></label>
<label for="button_about_me" class="label_about_me"><span class="th th-eyelash"></span></label>
<label for="button_code" class="label_code"><span class="th th-code"></span></label>
</div>
</body> Комментарии:
1. спасибо ^^ извините, но как работает calc (1.5px — 100%)?
2. @anonrice значение -100% скроет весь элемент слева, но нам нужно сохранить видимую границу, поэтому мы должны добавить 1.5px, таким образом, результат (1.5px — 100%)