css手写开关按钮

最新推荐文章于 2024-05-18 10:01:50 发布
最新推荐文章于 2024-05-18 10:01:50 发布
阅读量513 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38401285/article/details/80098889
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开关</title>
    <link rel="stylesheet" href="css/05style.css">
</head>
<body>
    <input type="checkbox" id="checkbox">
    <div class="switch">
        <label for="checkbox"></label>
    </div>
</body>
</html>

@charset "utf-8";
#checkbox{
    display:none;
}
.switch{
    width:80px;
    height:20px;
    border:1px solid #666;
    border-radius: 10px;
    background:#333;
    position:relative;
    label{
        width:30px;
        height:20px;
        border-radius: 10px;
        background:#fff;
        position:absolute;
        top:0;
        left:0;
        transition: all 1s linear 0s;
    }
    
    label::before{
        content:"OFF";
        color:#fff;
        position:absolute;
        top:-2px;
        left:42px;
        transition: all 1s linear 0s;
    }
   
}
#checkbox:checked + .switch label{
    left:50px;
}

#checkbox:checked + .switch label::before{
    left:-30px;
    content:'ON';
}

#checkbox:checked + .switch{
    background:green;
}

结果：



夕阳下美了剪影
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Switch开关按钮js
weixin_45932363的博客
05-12 962
html代码: <view class="switch-all" bindtap="handleswitch"> <view class="switch-btn" id="{{ins == 1 ? 'switchone' : ins == 2 ? 'switchtwo' : ''}}"></view> </view> css代码: .switch-all { width: 100rpx; height: 50rpx; background:
开关按钮用css实现
weixin_56848461的博客
01-12 1286
开关按钮css实现
推荐项目：纯CSS切换开关(CSS Toggle Switch)
gitblog_00074的博客
05-18 437
推荐项目：纯CSS切换开关(CSS Toggle Switch) 项目地址:https://gitcode.com/ghinda/css-toggle-switch 在这个数字化时代，我们经常需要在用户界面中添加易于操作的切换按钮。CSS Toggle Switch 是一个由 Ionuț Colceriu 创建并维护的开源项目，它提供了一套无需JavaScript，仅依赖CSS实现的可访问性极强的...
css实现switch开关
Julie_Go的专栏
05-30 2246
html css 实现Switch开关
css写一个原生switch开关按钮
weixin_44519496的博客
09-09 420
<!DOCTYPE html> <html> <head> <title>switch开关按钮</title> <style type="text/css"> #checked { width: 60px; position: relative; margin: 20px auto; } .labelBox { margin-bottom: 20px; background: #409eff...
css带有文字提示的开关按钮
Aurora的博客
10-18 4052
代码展示 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;css编写开关按钮(带文字提示)&lt;/title&gt;     &lt;style type="text/css"
纯css手写switch
Dormiveglia-flx的博客
10-14 832
2.定义switch的开关按钮：使用伪元素，给switch添加按钮。1.定义switch的背景：让span标签，填充满父元素，用作switch的背景。标签，就可以在隐藏input的时候，点击label触发选中事件，我们经常用这种方式来定义一些样式。前置知识二：正常来说，我们dispaly:none的时候，我们就不会触发隐藏元素的点击事件了。当input选中的时候，已经添加的伪类，颜色变白，且移动44px */概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。
前端经验_纯CSS写一个开关按钮
大脸猫~
07-08 5794
写个开关按钮,效果如图： 当点击的时候： 利用CSS3 过渡的动画效果 结构上写一个输入框为CheckBox ，利用label绑定。实现点击之后切换 HTML代码： CSS3代码： &amp;lt;style&amp;gt; .onoffswitch{ position:absolute; width:50px; display:block; left...
手写element 级联面板如何实现？
浮生的博客
09-17 1183
<!DOCTYPE html> <html> <head> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <meta charset="UTF-8"> <!-- import CSS --> <style>
HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
weixin_29291863的博客
06-21 1923
先看题，别看答案试下吧 ~_~1、下面的代码输出的内容是什么？function O(name){this.name=name||'world';}O.prototype.hello=function(){return function(){console.log('hello '+this.name)}}var o=new O;var hello=o.hello();hello();分析：1、O类...
CSS开关按钮样式详解
12-10
【CSS开关按钮样式详解】 在网页设计中，创建具有统一且吸引人的用户界面至关重要。而传统的HTML checkbox元素在样式控制方面存在局限性，各浏览器之间的显示效果可能存在差异。为了解决这个问题，我们可以利用CSS...
CSS3立体开关按钮特效
07-31
本篇将详细探讨"CSS3立体开关按钮特效"这一主题，以及如何利用CSS3技术实现具有立体感的开关按钮，包括5种颜色的单选按钮切换。 首先，CSS3中的`transform`属性是实现立体效果的关键。通过`rotateX`、`rotateY`和`...
JS+CSS3开关按钮动画特效
07-24
在网页设计中，交互元素的视觉效果和用户体验是至关重要的，JS+CSS3开关按钮动画特效就是这样的一个组件。这个特效结合了JavaScript和CSS3两种技术，为用户提供了一种直观且富有动态感的操作方式，使得开关按钮在...
CSS3红色开关按钮特效
07-24
本教程将详细讲解如何利用CSS3实现一个红色3D立体开关按钮，以及如何添加逼真的切换动画。 首先，我们需要了解CSS3的关键特性在创建此类特效中的应用： 1. **选择器**：CSS3引入了更强大的选择器，如类选择器 `....
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
css开关按钮网站推荐
09-28
推荐一些CSS开关按钮网站： 1. CodePen（https://codepen.io/）：CodePen是一个代码分享平台，你可以在上面搜索和浏览其他用户分享的开关按钮样式。 2. CSS Checkbox（https://csscheckbox.com/）：CSS Checkbox是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值