如何使用纯CSS实现万圣节的toggle控件(附源码)
本篇文章给大家带来的内容是关于如何使用纯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控件(附源码)的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
