本篇文章给大家带来的内容是关于如何使用纯css实现万圣节的toggle控件（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码地址https://github.com/shanyuhai123/learncss/tree/master/0159-halloween-switcher
代码解读定义容器 halloween-switcher , 通过 checkbox 来实现切换
<section class="halloween-switcher"> <input type="checkbox" id="halloween-input"> <label for="switch-input" class="halloween-label"> <div class="pumpkin-container"></div> <div class="vampire-container"></div> </label></section>
引入字体, 居中显示:
@import url('https://fonts.googleapis.com/css?family=kodchasan');* { font-family: 'kodchasan';}html { font-size: 20px;}body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: #081219; overflow: hidden;}
设置实际容器 label 大小
.halloween-label { width: 30rem; height: 10rem; border: 3px solid #e56d48; border-radius: 10rem; cursor: pointer; display: flex; align-items: center; position: relative;}
增加两种容器的配色
html { --pumpkin-color: #e56d48; --vampire-color: #4d7c99;}
定义 pumpkin-container , vampire-container 容器 及 文字
.halloween-input ~ .halloween-label::before,.halloween-input:checked ~ .halloween-label::before { position: absolute; font-size: 2.5rem; text-transform: uppercase;}.halloween-input ~ .halloween-label::before { content: 'pumpkin'; color: var(--pumpkin-color); left: 70%; transform: translatex(-70%);}.halloween-input:checked ~ .halloween-label::before { content: 'vampire'; color: var(--vampire-color); left: 25%; transform: translatex(-25%);}.halloween-input ~ .halloween-label .pumpkin-container,.halloween-input ~ .halloween-label .vampire-container { width: 9.5rem; height: 9.5rem; border-radius: 50%; position: absolute; left: 0.25rem; overflow: hidden;}.halloween-input ~ .halloween-label .pumpkin-container { background-color: var(--pumpkin-color); filter: opacity(1);}.halloween-input ~ .halloween-label .vampire-container { background-color: var(--vampire-color); filter: opacity(0);}.halloween-input:checked ~ .halloween-label .pumpkin-container { left: calc(100% - 0.25rem); transform: translatex(-100%); filter: opacity(0);}.halloween-input:checked ~ .halloween-label .vampire-container { left: calc(100% - 0.25rem); transform: translatex(-100%); filter: opacity(1);}
增加 label容器 颜色渐变
.halloween-label { border: 3px solid var(--label-border-color); transition: .5s ease-in-out;}.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: .5s ease;}.halloween-input ~ .halloween-label .pumpkin-container,.halloween-input ~ .halloween-label .vampire-container { transition: .5s ease;}
先绘画 pumpkin , 补全 pumpkin-container
<p class="pumpkin-container"> <p class="pumpkin__eyes-n-nose"></p> <p class="pumpkin__mouth-n-teeths"></p></p>
新增果肉颜色
html { --pumkin-pulp-color: #330a0f;}
绘画 pumpkin 的 pumpkin__eyes-n-nose
伪元素画出眼睛
.pumpkin__eyes-n-nose { position: absolute; top: 20%; width: 0; height: 0; border-style: solid; border-width: 0 0.8rem 1.6rem 0.8rem; color: var(--pumpkin-color); border-bottom-color: var(--pumkin-pulp-color); background-color: var(--pumkin-pulp-color);}.pumpkin__eyes-n-nose::before,.pumpkin__eyes-n-nose::after { content: ''; position: absolute; width: 1rem; height: 1rem; background-color: var(--pumkin-pulp-color); border-radius: 50%; top: 0.5rem; left: 0;}.pumpkin__eyes-n-nose::before { margin-left: -3.25rem;}.pumpkin__eyes-n-nose::after { margin-left: 2.25rem;}
绘画 pumpkin 的 pumpkin__mouth-n-teeths
伪元素画出牙齿
.pumpkin__mouth-n-teeths { position: absolute; width: 6.5rem; height: 3.25rem; bottom: 10%; background-color: var(--pumkin-pulp-color); border-radius: 0 0 6.5rem 6.5rem;}.pumpkin__mouth-n-teeths::before,.pumpkin__mouth-n-teeths::after { content: ''; position: absolute; height: 0.75rem; width: 1rem; background-color: var(--pumpkin-color);}.pumpkin__mouth-n-teeths::before { top: 0; left: 1.25rem;}.pumpkin__mouth-n-teeths::after { height: 1rem; bottom: 0; right: 1.25rem;}
再绘画 vampire , 补全 vampire-container
<p class="vampire-container"> <p class="vampire__eyes"></p> <p class="vampire__mouth"> <p class="vampire__teeths"></p> <p class="vampire__tongue"></p> </p></p>
利用 伪元素 绘出 vampire-container 的脸
.vampire-container::before,.vampire-container::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: #c2def2; /* face color */ border-radius: 45% 45% 0 0; top: 0.75rem;}.vampire-container::before { left: -4rem;}.vampire-container::after { right: -4rem;}
伪元素绘出 vampire__eyes
.vampire__eyes { top: 20%; position: absolute; z-index: 1;}.vampire__eyes::before,.vampire__eyes::after { content: ''; position: absolute; width: 1rem; height: 1rem; background-color: #d63e49; /* eye-color */ border-radius: 50%; top: 0.5rem; left: 0;}.vampire__eyes::before { margin-left: -3.25rem;}.vampire__eyes::after { margin-left: 2.25rem;}
绘出 vampire__mouth
.vampire__mouth { position: absolute; width: 6.5rem; height: 3.25rem; background-color: var(--pumkin-pulp-color); bottom: 10%; border-radius: 0 0 6.5rem 6.5rem; display: flex; justify-content: center; overflow: hidden; z-index: 1;}
绘出 vampire__teeths 门牙, 伪元素绘出牙齿
.vampire__teeths { position: absolute; width: 100%; height: 1rem; background-color: #fffae6; top: -1px;}.vampire__teeths::before,.vampire__teeths::after { content: ''; position: absolute; width: 0; height: 0; color: transparent; border-style: solid; border-width: 0.65rem 0.375rem 0 0.375rem; border-top-color: #fffae6; top: 0.95rem;}.vampire__teeths::before { left: 1rem;}.vampire__teeths::after { right: 1rem;}
绘出 vampire__tongue
.vampire__tongue { position: absolute; width: 3.5rem; height: 1.75rem; background-color: #d63e49; bottom: -0.75rem; border-radius: 3.5rem 3.5rem 0 0;}
再接着把 checkbox 隐藏掉即可
.halloween-input { display: none;}
增加微笑动画 smile
.vampire__teeths { animation: smile 2s ease-in-out infinite;}.vampire__tongue { animation: smile 3s ease-in-out infinite;}@keyframes smile { 50% { transform: scaley(1.5); }}
以上就是如何使用纯css实现万圣节的toggle控件（附源码）的详细内容。