CSS打造仿真开关

最新推荐文章于 2024-06-28 18:15:00 发布

紫微前端

最新推荐文章于 2024-06-28 18:15:00 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125657906

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文详细介绍了如何利用CSS和HTML来实现一个仿真的开关组件，涵盖了从布局设计到状态切换的完整过程，包括使用伪类选择器实现开关的样式变化和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<label class="switch">
    <input type="checkbox" checked/>
    <div class="indicator left"></div>
    <div class="indicator right"></div>
    <div class="button"></div>
  </label>
<style>
    body,
    html {
        width: 100vw;
        height: 100vh;
    }
    
    body {
        background-image: linear-gradient(135deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 80%));
        display: flex;
        align-items: center;
        justify-content: center;
        --hue: 220deg;
        --width: 23rem;
        --accent-hue: 22deg;
        --duration: 0.6

了解本专栏