css+div实现点状伸缩radio选择切换效果代码-html代码-BFW代码库

css+div实现点状伸缩radio选择切换效果代码

代码语言：html

代码描述：css+div实现点状伸缩radio选择切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}
body {
  display: grid;
  place-content: center;
  background: black;
}
body:hover {
  background: #222;
}

nav {
  --size: 30px;
  --gap: 10px;
  container: dotnav / size;
  width: 30vw;
  height: 20vh;
  overflow: hidden;
  resize: both;
  outline: 2px dotted cyan;
}

ol {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap);
  gap: var(--gap);
  font-size: 0;
  list-style: none;
}

li {
  background: orangered;
  border-radius: 50cqh;
  transition: flex 300ms;
  flex: 0 auto;
}

li:has(input:checked) {
  flex: 1 auto;
}

label {
  display: inline-block;
  font-size: var(--size);
  line-height: 1em;
  min-width: 1em;
}

label:not(:has(input:checked)) {
  cursor: pointer;
}

input {
  visibility: hidden;
}

@container dotnav (aspect-ratio < 1) {
  ol {
    flex-direction: column;
  }
}
</style>
.........完整代码请登录后点击上方下载按钮下载查看