论坛 › 欢乐水吧 › 前黑后白【按钮纯码】

亚伦影音工作室 发表于 2024-12-12 17:18

前黑后白【按钮纯码】

本帖最后由 亚伦影音工作室 于 2024-12-17 11:16 编辑 <br /><br /><style type="text/css">
      .chooseBtn { display: none;
      }
      .choose-label { top: 10px;
      left: 10px;
            width: 40px;
            height: 40px; border: 2px solid #000;box-shadow:0 0px 0px 6px #ccc;
            display: block;
            border-radius: 50px;
            position: relative;
            background: #ccc;transition: all 0.3s;
            overflow: hidden; cursor: pointer;
      }
.choose-label:before {position: absolute;
        content: '';
        border-style: solid;
left: 12px;top:10px;
        border-color: #000;
width: 4px;
        height: 20px;
        border-width: 0 6px 0 6px;
        }
          .chooseBtn:checked+label {display: block;box-shadow:0 0px 0px 6px #000;border: 2px solid #ccc;
            background:#222;transition: all 0.3s;
      }
.chooseBtn:checked+label:before{border-style: solid;
        border-color: #ccc;
position: absolute;
        content: '';
left: 13px;top:8px;
        width: 0;
         height: 0;
        border-width: 12px 20px;
        border-color: transparent transparent transparent #ccc;
        }

    </style>
<input type="checkbox" name="sex" id="male" class="chooseBtn" />
    <label for="male" class="choose-label"> </label>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop></audio>
<script >
male.onclick = () => aud.paused ?aud.play():aud.pause();
</script >

杨帆 发表于 2024-12-12 17:22

小巧、精致、实用，谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2024-12-12 19:44

这个也漂亮。亚伦老师尝试了这么多，真是动足了脑筋呢{:4_187:}

小辣椒 发表于 2024-12-12 20:59

又一个小播{:4_199:}

小辣椒 发表于 2024-12-12 21:00

亚伦制作辛苦了

查看完整版本: 前黑后白【按钮纯码】