[CSS] iOS开关按钮 [练习]

时间:2021-6-12 作者:qvyue

案例来源

本例来自CodingStartup的视频:[CSS] iOS开关按钮(CSS变数、深色模式)

案例演示

在线演示

知识总结

  1. 定义css变量:--color-gray: #E9E9E9;,我们可以将css变量定义在:root伪类中,这样变量在所有位置都可以使用。使用css变量通过var()函数使用:background-color: var(--color-dark-gray);
  2. display: none;的效果相对于在页面中去除元素,外观和位置都去掉,而非只是透明。
  3. :active表示点击按住不动的情况,对于checkbox来说,除直接使用:active,还有一个是在选中的时候使用,使用:checked:active
  4. 适配mac的暗黑模式,使用@media (prefers-color-scheme: dark),在其中写下暗黑模式的css样式即可。
  5. 不论::before还是::after,都相当于所使用元素的子元素,所以可以使用父相子绝的定位方式。
  • 注:其他知识点在之前的练习中均有提及。

主要代码

html


css

:root {
    --button-width: 500px;
    --button-height: 295px;
    --toggle-diameter: 255px;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider:333px;
    --color-gray: #E9E9E9;
    --color-dark-gray: #39393D;
    --color-green: #30D158;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

span {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-gray);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: .3s background-color ease-in-out;
}

span::after {
    content: '';
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #ffffff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.10);
    transition: .3s all ease-in-out;
}

input[type="checkbox"]:checked + span {
    background-color: var(--color-green);
}

input[type="checkbox"]:checked + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.10);
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:active + span::after {
    width: var(--toggle-wider);
}

input[type="checkbox"]:checked:active + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

@media (prefers-color-scheme: dark) {
    body{
        background-color: #1C1C1E;
    }

    span {
        background-color: var(--color-dark-gray);
    }
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。