如何确保从中心开始的跨度向上和向下扩展。我不知道自己是否已经解释过,我附上了代码,以便您可以理解我的意思。有谁可以帮助我吗?
body {
font: caption;
background-color: #f1f1f1;
position: relative;
height: 100%;
}
.first_switcher {
display: inline-block;
height: 38px;
margin-top:50px;
padding: 0px;
background: dimgray;
border-radius: 2px;
width: 200px;
border-radius: 38px;
position: relative;
}
.first_switcher__input2{
display: none;
}
.first_switcher__input1 {
display: none;
}
.first_switcher__label1 {
float: left;
width: 100px;
font-size: 12px;
line-height: 38px;
color: #ffffff;
text-align: center;
cursor: pointer;
position: inherit;
z-index: 10;
transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.first_switcher__label2 {
float: left;
width: 100px;
font-size: 12px;
line-height: 38px;
color: transparent;
text-align: center;
cursor: pointer;
position: inherit;
z-index: 10;
transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.first_switcher__toggle {
position: absolute;
float: left;
height: 0px;
width: 0px;
font-size: 12px;
line-height: 38px;
cursor: pointer;
background-color: #000000;
border-radius: 38px;
left: 0px;
top: 14px;
transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.first_switcher__input1:checked + .first_switcher__label1 {
color: white;
}
.first_switcher__input2:checked + .first_switcher__label2 {
transition-delay: 1s;
color: white;
}
.first_switcher__input1:not(:checked) + .first_switcher__label1 {
color: transparent;
}
.first_switcher__input2:checked ~ .first_switcher__toggle {
-webkit-transition: width 2s, height 2s;
transition: width 2s, height 2s;
height: 38px;
width: 200px;
left: 0px;
}
<div class="first_switcher">
<input type="radio" name="balance" id="on" class="first_switcher__input1" checked/>
<label for="on" class="first_switcher__label1">ON</label>
<input type="radio" name="balance" id="off" class="first_switcher__input2"/>
<label for="off" class="first_switcher__label2">OFF</label>
<span class="first_switcher__toggle"></span>
</div>
答案 0 :(得分:1)
您需要同时设置宽度/高度和顶部动画,以使元素在生长时保持在中心
body {
font: caption;
background-color: #f1f1f1;
position: relative;
height: 100%;
}
.first_switcher {
display: inline-block;
height: 38px;
margin-top: 50px;
padding: 0px;
background: dimgray;
border-radius: 2px;
width: 200px;
border-radius: 38px;
position: relative;
}
.first_switcher__input2 {
display: none;
}
.first_switcher__input1 {
display: none;
}
.first_switcher__label1 {
float: left;
width: 100px;
font-size: 12px;
line-height: 38px;
color: #ffffff;
text-align: center;
cursor: pointer;
position: inherit;
z-index: 10;
transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.first_switcher__label2 {
float: left;
width: 100px;
font-size: 12px;
line-height: 38px;
color: transparent;
text-align: center;
cursor: pointer;
position: inherit;
z-index: 10;
transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.first_switcher__toggle {
position: absolute;
height: 0px;
width: 0px;
font-size: 12px;
line-height: 38px;
cursor: pointer;
background-color: #000000;
border-radius: 38px;
left: 0; /* updated */
top: 50%; /* updated */
transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.first_switcher__input1:checked+.first_switcher__label1 {
color: white;
}
.first_switcher__input2:checked+.first_switcher__label2 {
transition-delay: 1s;
color: white;
}
.first_switcher__input1:not(:checked)+.first_switcher__label1 {
color: transparent;
}
.first_switcher__input2:checked~.first_switcher__toggle {
transition: all 2s; /* updated */
height: 38px;
width: 200px;
left: 0; /* updated */
top: calc(50% - 19px); /* updated */
}
<div class="first_switcher">
<input type="radio" name="balance" id="on" class="first_switcher__input1" checked/>
<label for="on" class="first_switcher__label1">ON</label>
<input type="radio" name="balance" id="off" class="first_switcher__input2" />
<label for="off" class="first_switcher__label2">OFF</label>
<span class="first_switcher__toggle"></span>
</div>