导入字体，居中显示：@importurl('https://fonts.googleapis.com/css?family=Kodchasan');*{font-family:'Kodchasan';}html{font-size:20px;}body{宽度:100vw;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景：#081219；overflow:hidden;}设置实际容器标签size.halloween-label{width:30rem;高度：10rem；边框：3px实心#E56D48；边界半径：10rem；游标：指针；显示：弹性；对齐项目：居中；56D48；--vampire-color:#4D7C99;}定义pumpkin-container,vampire-container容器及文字.halloween-input~.halloween-label::before,.halloween-input:checked~.halloween-label::before{position：绝对；字体大小：2.5rem；text-transform:uppercase;}.halloween-input~.halloween-label::before{content:'南瓜';颜色：var（--南瓜色）；左：70%；transform:translateX(-70%);}.halloween-input:checked~.halloween-label::before{内容：'吸血鬼';颜色：var（--吸血鬼颜色）；左：25%；转换：translateX(-25%);}.halloween-input~.halloween-label.pumpkin-container,.halloween-input~.halloween-label.vampire-container{width:9.5rem;高度：9.5rem；边界半径：50%；位置：绝对；左：0.25rem；溢出：隐藏；}.halloween-input~.halloween-label.pumpkin-container{背景色：var（--南瓜色）；过滤器：不透明度（1）;}.halloween-input~.halloween-label.vampire-container{背景颜色：var（--va帝国颜色）；过滤器：不透明度（0）；}.halloween-input:checked~.halloween-label.pumpkin-container{left:calc(100%-0.25rem);转换：translateX(-100%)；过滤器：不透明度（0）；}.halloween-input:checked~.halloween-label.vampire-container{left:calc(100%-0.25rem);转换：translateX(-100%)；filter:opacity(1);}增加标签容器颜色渐变.halloween-label{border:3pxsolidvar(--label-border-color);过渡：.5s缓入缓出；}.halloween-label{--label-border-color:var(--pumpkin-color);}.halloween-input:checked~.halloween-label{--label-border-color:var(--vampire-color);}pumpkin-container,vampire-container容器及文字动画效果.halloween-input~.halloween-label::before,.halloween-input:checked~.halloween-label::before{transition:.5sease;}.halloween-input~.halloween-label.pumpkin-container,.halloween-input~.halloween-label.vampire-container{transition:.5sease;}先画南瓜,补充南瓜容器