首页 >web前端 >js教程 >使用 html css 和 javascript 切换乐趣

使用 html css 和 javascript 切换乐趣

Patricia Arquette原创: 2024-12-05 14:20:13912浏览

Toggle Switches fun using html css and javascript

<html lang="zh-cn">
<头>
    
    
    <title>带逻辑的拨动开关</title>
    
        身体 {
            显示：柔性；
            弹性方向：列；
            对齐项目：居中；
            调整内容：居中；
            高度：100vh；
            背景颜色：#121212；
            颜色：#fff；
            字体系列：Arial、无衬线字体；
        }
        .toggle-container {
            显示：柔性；
            对齐项目：居中；
            边距：20px 0；
        }
        .切换标签{
            左边距：10px；
            字体大小：1.2rem；
            背景颜色: rgb(64, 109, 94);
            内边距：5px；

        }
        。转变 {
            位置：相对；
            显示：内联块；
            宽度：50px；
            高度：25 像素；
        }
        .切换输入{
            不透明度：0；
            宽度：0；
            高度：0；
        }
        。滑块 {
            位置：绝对；
            光标：指针；
            顶部：0；
            左：0；
            右：0；
            底部：0；
            背景颜色：#555；
            边框半径：25px；
            过渡：0.4s；
        }
        .slider:之前{
            位置：绝对；
            内容： ””;
            高度：20px；
            宽度：20px；
            左：3px；
            底部：2.5px；
            背景颜色：白色；
            边界半径：50%；
            过渡：0.4s；
        }
        输入：选中.slider {
            背景颜色：#4caf50；
        }
        输入：检查.slider：之前{
            变换：translateX(24px)；
        }
        。盒子{
            高度：250 像素；
            宽度：300px；
            背景颜色: rgb(8, 72, 51);
            边框半径：10px；
            内边距：5px；
        }
    </风格>
</头>

    <div>




          </div>

以上是使用 html css 和 javascript 切换乐趣的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html switch using pointer display position margin padding border viewport background transform transition column flex input

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Remove an Event Listener from Within Its Own Definition in JavaScript?下一篇：How Does JavaScript's Logical AND (&&) Operator Work in Assignments?

查看更多