前言
在前端开发中，如何通过简单的代码实现有趣的交互效果，是一个值得探索的话题。今天，我想分享一个用纯 CSS 实现的 Emoji 切换开关。这个小技巧不仅视觉效果吸引人，还能通过交互提供即时反馈，非常适合用在需要开关效果的场景中。
一、为什么用纯 CSS？
使用纯 CSS 实现交互效果的好处在于：无需依赖 JavaScript，代码更简洁，性能更高，且易于维护。通过 CSS 的变量、3D 变换和过渡效果，我们可以实现一个动态、响应式的用户界面元素。
二、HTML 结构
首先，我们需要一个简单的 HTML 结构。这个结构包括一个 checkbox 和一个用于显示 Emoji 的容器。
<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 切换开关的样式和动画效果。
: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 的翻转效果。
- • 使用
- 2. 过渡效果：
-
- • 使用
transition属性让动画更加平滑。 - •
cubic-bezier定义了动画的缓动效果，使得动画更加自然。
- • 使用
- 3. 响应式设计：
-
- • 使用
calc()和vw单位，确保字体大小和布局在不同设备上都能良好显示。
- • 使用
五、自定义 Emoji
如果你想自定义 Emoji，可以通过修改 .switch__emoji-face 的样式来实现。例如，可以调整 background-color 或添加更多的伪元素来创建不同的表情。
六、总结
通过纯 CSS，我们实现了一个有趣且功能丰富的 Emoji 切换开关。这个小技巧不仅视觉效果吸引人，还能通过交互提供即时反馈，非常适合用在需要开关效果的场景中。希望这篇文章能激发你探索更多 CSS 的可能性！
代码链接：code.juejin.cn/pen/7419571…
学习完这一篇，你已经超越99.99%的人，玩个游戏放松一下吧~
