圆形多选框，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3

            
            <div class="checkyborder">
  <input checked class="checky" type="checkbox">
</div>

编辑器加载中

</body>

Stylus

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

            
            html, body
    background-color #111
    color #fff
    display grid
    place-items center
    height 100vh
    width 100vw
    
    
.checkyborder
    width 100px
    height 100px
    border-radius 100%
    display flex
    justify-content center
    align-items center
    background-color #fff

.ischecked 
    background conic-gradient( from var(--angle),
  #00bfff 1%, /* Sky Blue */
  #800080 40%, /* Purple */
  #ff69b4 65%, /* Pink */
  #0000ff 80%, /* Blue */
  #00bfff 85% /* Sky Blue */
)
    

    
.checky
    width 80px
    height 80px
    appearance none
    border-radius 100%
    box-shadow inset 0 0 5px rgba(0,0,0,0.5)
    display flex
    background #111
    justify-content center
    align-items center
    z-index 10
    &:checked:after
        content '\2714'
        border-radius 8px
        position absolute
        color skyblue
        display flex
        justify-content center
        align-items center
        font-size 52px

编辑器加载中

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

            
            let chk = document.querySelector('.checky');
let bdr = document.querySelector('.checkyborder');

function startAnimation() {
  let angle = 0;

  function animate() {
    angle = (angle + 1) % 360;
    bdr.style.setProperty('--angle', `${angle}deg`);
    requestAnimationFrame(animate);
  }

  animate();
}

window.addEventListener('load', function() {
  if (chk.checked) {
    startAnimation();
  }
});

chk.addEventListener('click', function() {
    bdr.classList.toggle('ischecked');
  if (chk.checked) {
        startAnimation();
  } else {
    bdr.classList.remove('ischecked');
  }
});

编辑器加载中

预览

控制台