Question

我有一个 div 容器，它将在屏幕的整个宽度上均匀地布局每个项目。

我想动态调整所选输入后面的 BACK div。我在理论上知道如何做到这一点：做一个转换：转换为 BACK div 的 #after。但我不知道如何计算正确的 px 值，具体取决于选择的输入标签。

可在此处查看代码笔：https://codepen.io/depechie/pen/oNZagLa

视觉上所需的最终结果应如下图所示。所以 BACK div（蓝色轮廓）应该放在所选输入的后面。

function openLink(link) {
  alert(link);
}

@import url("https://fonts.googleapis.com/css?family=Montserrat:400");
* {
  margin: 0;
}

html,
body {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.bottombarcontainer {
  position: relative;
  width: 100vw;
  height: 100%;
  background: #66ccff;
  overflow: hidden;
}

.bottombarcontainer .bottombar {
  display: flex;
  position: absolute;
  width: 100%;
  height: 55px;
  bottom: 0;
  justify-content: space-around;
  align-items: center;
}

.bottombarcontainer .bottombar #back {
  width: 100%;
  position: absolute;
  background: white;
  height: 45px;
  bottom: 0;
  z-index: 0;
}


/* .bottombarcontainer .bottombar #back::after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: #66ccff;
  border-radius: 50%;
  margin-top: -20px;
  transform: translate(5px, 0);
  will-change: transform;
  transition: transform 0.2s ease;
} */

.bottombarcontainer .bottombar input[type="radio"]:checked+.round {
  transform: translate(0, -7px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
  background: white;
}

.bottombarcontainer .bottombar input[type="radio"]:checked+.round svg {
  color: #66ccff;
}

.bottombarcontainer .bottombar input {
  display: none;
}

.bottombarcontainer .bottombar .round {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transform: translate(0, 5px);
  transition: transform 0.3s ease;
  will-change: transform;
  cursor: pointer;
  z-index: 1;
  text-align: center;
}

.bottombarcontainer .bottombar .round svg {
  height: 100%;
  color: #aaa;
  line-height: 45px;
}

<div class="bottombarcontainer">
  <div class="bottombar">
    <input type="radio" name="tap" id="t0" checked="checked">
    <label class="round" for="t0">
    <span class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="currentColor" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
        </svg>
    </span>
      </label>
    <input type="radio" name="tap" id="t1" onchange="openLink('docs')">
    <label class="round" for="t1">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
        <line x1="8" y1="6" x2="21" y2="6"></line>
        <line x1="8" y1="12" x2="21" y2="12"></line>
        <line x1="8" y1="18" x2="21" y2="18"></line>
        <line x1="3" y1="6" x2="3" y2="6"></line>
        <line x1="3" y1="12" x2="3" y2="12"></line>
        <line x1="3" y1="18" x2="3" y2="18"></line>
      </svg>
    </span>
    </label>
    <input type="radio" name="tap" id="t2">
    <label class="round" for="t2">
    <span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12.74,5.47C15.1,6.5 16.35,9.03 15.92,11.46C17.19,12.56 18,14.19 18,16V16.17C18.31,16.06 18.65,16 19,16A3,3 0 0,1 22,19A3,3 0 0,1 19,22H6A4,4 0 0,1 2,18A4,4 0 0,1 6,14H6.27C5,12.45 4.6,10.24 5.5,8.26C6.72,5.5 9.97,4.24 12.74,5.47M11.93,7.3C10.16,6.5 8.09,7.31 7.31,9.07C6.85,10.09 6.93,11.22 7.41,12.13C8.5,10.83 10.16,10 12,10C12.7,10 13.38,10.12 14,10.34C13.94,9.06 13.18,7.86 11.93,7.3M13.55,3.64C13,3.4 12.45,3.23 11.88,3.12L14.37,1.82L15.27,4.71C14.76,4.29 14.19,3.93 13.55,3.64M6.09,4.44C5.6,4.79 5.17,5.19 4.8,5.63L4.91,2.82L7.87,3.5C7.25,3.71 6.65,4.03 6.09,4.44M18,9.71C17.91,9.12 17.78,8.55 17.59,8L19.97,9.5L17.92,11.73C18.03,11.08 18.05,10.4 18,9.71M3.04,11.3C3.11,11.9 3.24,12.47 3.43,13L1.06,11.5L3.1,9.28C3,9.93 2.97,10.61 3.04,11.3M19,18H16V16A4,4 0 0,0 12,12A4,4 0 0,0 8,16H6A2,2 0 0,0 4,18A2,2 0 0,0 6,20H19A1,1 0 0,0 20,19A1,1 0 0,0 19,18Z" />
</svg>
    </span>
    </label>
    <input type="radio" name="tap" id="t3">
    <label class="round" for="t3">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
        <line x1="8" y1="6" x2="21" y2="6"></line>
        <line x1="8" y1="12" x2="21" y2="12"></line>
        <line x1="8" y1="18" x2="21" y2="18"></line>
        <line x1="3" y1="6" x2="3" y2="6"></line>
        <line x1="3" y1="12" x2="3" y2="12"></line>
        <line x1="3" y1="18" x2="3" y2="18"></line>
      </svg>
    </span>
    </label>
    <div class="div" id="back"></div>
  </div>
</div>

Answer 1

简单地在被选元素上加一个边框？

 .bottombarcontainer .bottombar input[type="radio"]:checked + .round {
  transform: translate(0, -7px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
  background: white;
  border:8px solid #66ccff ;
}

动态设置 DIV 的值

1 个答案: