纯 CSS 实现有趣 Emoji 切换开关

前言

在前端开发中，如何通过简单的代码实现有趣的交互效果，是一个值得探索的话题。今天，我想分享一个用纯 CSS 实现的 Emoji 切换开关。这个小技巧不仅视觉效果吸引人，还能通过交互提供即时反馈，非常适合用在需要开关效果的场景中。

一、为什么用纯 CSS？

使用纯 CSS 实现交互效果的好处在于：无需依赖 JavaScript，代码更简洁，性能更高，且易于维护。通过 CSS 的变量、3D 变换和过渡效果，我们可以实现一个动态、响应式的用户界面元素。

二、HTML 结构

首先，我们需要一个简单的 HTML 结构。这个结构包括一个 checkbox 和一个用于显示 Emoji 的容器。

ini 复制代码

<div class="switch">
  <input type="checkbox" class="switch__input" id="toggle">
  <label for="toggle" class="switch__label">Toggle</label>
  <div class="switch__wrapper">
    <div class="switch__emoji">
      <div class="switch__emoji-face"></div>
      <div class="switch__emoji-face"></div>
    </div>
  </div>
</div>

• switch__input 是一个隐藏的复选框，用于触发切换状态。
• switch__emoji 是 Emoji 的容器，包含两个 Emoji 表情。

三、CSS 样式

接下来，我们通过 CSS 来实现 Emoji 切换开关的样式和动画效果。

css 复制代码

:root {
--hue: 223;
--bg: hsl(var(--hue), 10%, 90%);
--fg: hsl(var(--hue), 10%, 10%);
--trans-dur: 0.5s;
--trans-timing1: cubic-bezier(0.65, 0, 0.35, 1);
--trans-timing2: cubic-bezier(0.65, 0, 0.35, 1.5);
font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280));
}

body {
background-color: var(--bg);
color: var(--fg);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.switch {
position: relative;
display: flex;
align-items: center;
}

.switch__input {
opacity: 0;
position: absolute;
}

.switch__label {
cursor: pointer;
margin-right: 1rem;
}

.switch__wrapper {
background-color: white;
border-radius: 50%;
box-shadow: 0001pxhsl(0, 0%, 80%), 0004pxhsl(0, 0%, 95%);
height: 2em;
width: 4em;
overflow: hidden;
position: relative;
}

.switch__emoji {
position: absolute;
height: 100%;
width: 200%;
transition: transform var(--trans-dur) var(--trans-timing1);
}

.switch__emoji-face {
position: absolute;
height: 100%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transition: transform var(--trans-dur) var(--trans-timing2);
}

.switch__emoji-face:before {
content: "";
position: absolute;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
background-color: hsl(48, 90%, 90%);
box-shadow: 0.25em0.25em0hsl(0, 0%, 0%, 0.3);
}

.switch__emoji-face:after {
content: "";
position: absolute;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: hsl(48, 90%, 90%);
box-shadow: 0.25em0.25em0hsl(0, 0%, 0%, 0.3);
}

.switch__input:checked + .switch__label + .switch__wrapper.switch__emoji {
transform: translateX(100%);
}

.switch__input:checked + .switch__label + .switch__wrapper.switch__emoji-face:first-child {
transform: rotateY(179.99deg);
}

.switch__input:checked + .switch__label + .switch__wrapper.switch__emoji-face:last-child {
transform: rotateY(0);
}

四、动画效果解析

1. 3D 变换：
- • 使用 transform: translateX(100%) 实现滑块的移动效果。
- • 使用 transform: rotateY(179.99deg) 实现 Emoji 的翻转效果。
1. 过渡效果：
- • 使用 transition 属性让动画更加平滑。
- • cubic-bezier 定义了动画的缓动效果，使得动画更加自然。
1. 响应式设计：
- • 使用 calc() 和 vw 单位，确保字体大小和布局在不同设备上都能良好显示。

五、自定义 Emoji

如果你想自定义 Emoji，可以通过修改 .switch__emoji-face 的样式来实现。例如，可以调整 background-color 或添加更多的伪元素来创建不同的表情。

六、总结

通过纯 CSS，我们实现了一个有趣且功能丰富的 Emoji 切换开关。这个小技巧不仅视觉效果吸引人，还能通过交互提供即时反馈，非常适合用在需要开关效果的场景中。希望这篇文章能激发你探索更多 CSS 的可能性！

代码链接：code.juejin.cn/pen/7419571...

学习完这一篇，你已经超越99.99%的人，玩个游戏放松一下吧~