本篇文章给大家带来的内容是关于如何使用纯css实现万圣节的toggle控件（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码地址
https://github.com/shanyuhai123/learnCSS/tree/master/0159-halloween-switcher
代码解读
定义容器 halloween-switcher , 通过 checkbox 来实现切换
引入字体, 居中显示:
立即学习“前端免费学习笔记（深入）”；
@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
新增果肉颜色
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
利用 伪元素 绘出 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控件（附源码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612702.html
微信扫一扫 
支付宝扫一扫 
