<div class="wrapper">
<div class="questDiv">你最喜欢的奶茶是?</div>
<div class="inputDiv">
<input type="radio" name="radios" id="radio_01" />
<label for="radio_01">
<div class="divSelect"></div>芝士草莓奶茶
</label>
</div>
<div class="inputDiv">
<input type="radio" name="radios" id="radio_02" checked/>
<label for="radio_02">
<div class="divSelect"></div>西柠蜜瓜汁
</label>
</div>
<div class="inputDiv">
<input type="radio" name="radios" id="radio_03" />
<label for="radio_03">
<div class="divSelect"></div>椰子奶茶
</label>
</div>
<div class="inputDiv">
<input type="radio" name="radios" id="radio_04" />
<label for="radio_04">
<div class="divSelect"></div>酸梅汁奶茶
</label>
</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
:root {
--sizeVar: 6vmin;
--colorVar: #ff69b4;
--colorVar-light: #ffcce6;
--colorVar-hover: #666666;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: "Quicksand", sans-serif;
background-color: #fee;
}
.wrapper {
display: flex;
flex-direction: column;
gap: var(--sizeVar);
font-size: var(--sizeVar);
color: #333333;
background-color: white;
padding: 30px 50px;
border-radius: 16px;
box-shadow: 0px 2px 15px #ff69b477, 0px 8px 80px #ff69b433;
}
input {
visibility: hidden;
}
.inputDiv {
position: relative;
margin-left: calc(var(--sizeVar) / 1.2);
}
label {
cursor: pointer;
transition: color 150ms linear 0s, opacity 150ms linear 0s;
}
label:hover {
color: var(--colorVar-hover);
}
input:checked + label {
color: var(--colorVar);
cursor: default;
}
input:checked + label .divSelect::before,
input:checked + label .divSelect::after {
transform: translateY(5%);
line-height: 4vmin;
}
input:checked + label .divSelect::before {
animation: headNod 1000ms ease-in-out infinite;
transform: translateY(10%);
animation-delay: 500ms;
}
.divSelect {
position: absolute;
width: var(--sizeVar);
height: var(--sizeVar);
top: 0.1vw;
left: 0;
border: 2px solid;
border-radius: 50%;
overflow: hidden;
transform: translate(-70%, 10%);
}
.divSelect::before,
.divSelect::after {
content: "•ٮ•";
color: black;
text-align: center;
line-height: 2vmin;
font-size: calc(var(--sizeVar) / 3.5);
position: absolute;
width: 54%;
height: 50%;
top: 10%;
left: 24%;
background: var(--colorVar);
background: radial-gradient(
circle,
var(--colorVar-light) 0%,
var(--colorVar) 100%
);
border-radius: 50%;
transform: translateY(250%);
transition: transform 300ms ease-in-out 0s,
line-height 400ms cubic-bezier(0.18, -0.39, 0.82, 1.45) 100ms;
}
.divSelect::after {
content: "";
top: 65%;
left: 5%;
width: 90%;
height: 90%;
transition: transform 300ms ease-in-out 0s;
}
.questDiv {
font-weight: 600;
}
@keyframes headNod {
0% {
line-height: 4vmin;
transform: translateY(10%);
}
50% {
line-height: 3vmin;
transform: translateY(0);
}
100% {
line-height: 4vmin;
transform: translateY(10%);
}
}
JS
格式化