CSS3自定义Checkbox特效 5种炫酷效果

最新推荐文章于 2024-07-29 09:17:12 发布
最新推荐文章于 2024-07-29 09:17:12 发布
阅读量2.2k 收藏 2
点赞数 3
分类专栏： html5 文章标签： checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_SJ521/article/details/68927520
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3自定义Checkbox特效DEMO演示</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    <style>
        html, body {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          min-height: 100%;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
          font-family: sans-serif;
        }

        ul, li {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .tg-list {
          text-align: center;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
        }

        .tg-list-item {
          margin: 0 2em;
        }

        h2 {
          color: #777;
        }

        h4 {
          color: #999;
        }

        .tgl {
          display: none;
        }
        .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        .tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
          background: none;
        }
        .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
          background: none;
        }
        .tgl + .tgl-btn {
          outline: 0;
          display: block;
          width: 4em;
          height: 2em;
          position: relative;
          cursor: pointer;
        }
        .tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
          position: relative;
          display: block;
          content: "";
          width: 50%;
          height: 100%;
        }
        .tgl + .tgl-btn:after {
          left: 0;
        }
        .tgl + .tgl-btn:before {
          display: none;
        }
        .tgl:checked + .tgl-btn:after {
          left: 50%;
        }

        .tgl-light + .tgl-btn {
          background: #f0f0f0;
          border-radius: 2em;
          padding: 2px;
          -webkit-transition: all .4s ease;
          transition: all .4s ease;
        }
        .tgl-light + .tgl-btn:after {
          border-radius: 50%;
          background: #fff;
          -webkit-transition: all .2s ease;
          transition: all .2s ease;
        }
        .tgl-light:checked + .tgl-btn {
          background: #9FD6AE;
        }

        .tgl-ios + .tgl-btn {
          background: #fbfbfb;
          border-radius: 2em;
          padding: 2px;
          -webkit-transition: all .4s ease;
          transition: all .4s ease;
          border: 1px solid #e8eae9;
        }
        .tgl-ios + .tgl-btn:after {
          border-radius: 2em;
          background: #fbfbfb;
          -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
          transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
          -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
        }
        .tgl-ios + .tgl-btn:active {
          -webkit-box-shadow: inset 0 0 0 2em #e8eae9;
          box-shadow: inset 0 0 0 2em #e8eae9;
        }
        .tgl-ios + .tgl-btn:active:after {
          padding-right: .8em;
        }
        .tgl-ios:checked + .tgl-btn {
          background: #86d993;
        }
        .tgl-ios:checked + .tgl-btn:active {
          -webkit-box-shadow: none;
          box-shadow: none;
        }
        .tgl-ios:checked + .tgl-btn:active:after {
          margin-left: -.8em;
        }

        .tgl-skewed + .tgl-btn {
          overflow: hidden;
          -webkit-transform: skew(-10deg);
          -ms-transform: skew(-10deg);
          transform: skew(-10deg);
          -webkit-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-transition: all .2s ease;
          transition: all .2s ease;
          font-family: sans-serif;
          background: #888;
        }
        .tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
          -webkit-transform: skew(10deg);
          -ms-transform: skew(10deg);
          transform: skew(10deg);
          display: inline-block;
          -webkit-transition: all .2s ease;
          transition: all .2s ease;
          width: 100%;
          text-align: center;
          position: absolute;
          line-height: 2em;
          font-weight: bold;
          color: #fff;
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        }
        .tgl-skewed + .tgl-btn:after {
          left: 100%;
          content: attr(data-tg-on);
        }
        .tgl-skewed + .tgl-btn:before {
          left: 0;
          content: attr(data-tg-off);
        }
        .tgl-skewed + .tgl-btn:active {
          background: #888;
        }
        .tgl-skewed + .tgl-btn:active:before {
          left: -10%;
        }
        .tgl-skewed:checked + .tgl-btn {
          background: #86d993;
        }
        .tgl-skewed:checked + .tgl-btn:before {
          left: -100%;
        }
        .tgl-skewed:checked + .tgl-btn:after {
          left: 0;
        }
        .tgl-skewed:checked + .tgl-btn:active:after {
          left: 10%;
        }

        .tgl-flat + .tgl-btn {
          padding: 2px;
          -webkit-transition: all .2s ease;
          transition: all .2s ease;
          background: #fff;
          border: 4px solid #f2f2f2;
          border-radius: 2em;
        }
        .tgl-flat + .tgl-btn:after {
          -webkit-transition: all .2s ease;
          transition: all .2s ease;
          background: #f2f2f2;
          content: "";
          border-radius: 1em;
        }
        .tgl-flat:checked + .tgl-btn {
          border: 4px solid #7FC6A6;
        }
        .tgl-flat:checked + .tgl-btn:after {
          left: 50%;
          background: #7FC6A6;
        }

        .tgl-flip + .tgl-btn {
          padding: 2px;
          -webkit-transition: all .2s ease;
          transition: all .2s ease;
          font-family: sans-serif;
          -webkit-perspective: 100px;
          -ms-perspective: 100px;
          perspective: 100px;
        }
        .tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
          display: inline-block;
          -webkit-transition: all .4s ease;
          transition: all .4s ease;
          width: 100%;
          text-align: center;
          position: absolute;
          line-height: 2em;
          font-weight: bold;
          color: #fff;
          position: absolute;
          top: 0;
          left: 0;
          -webkit-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
          backface-visibility: hidden;
          border-radius: 4px;
        }
        .tgl-flip + .tgl-btn:after {
          content: attr(data-tg-on);
          background: #02C66F;
          -webkit-transform: rotateY(-180deg);
          -ms-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
        }
        .tgl-flip + .tgl-btn:before {
          background: #FF3A19;
          content: attr(data-tg-off);
        }
        .tgl-flip + .tgl-btn:active:before {
          -webkit-transform: rotateY(-20deg);
          -ms-transform: rotateY(-20deg);
          transform: rotateY(-20deg);
        }
        .tgl-flip:checked + .tgl-btn:before {
          -webkit-transform: rotateY(180deg);
          -ms-transform: rotateY(180deg);
          transform: rotateY(180deg);
        }
        .tgl-flip:checked + .tgl-btn:after {
          -webkit-transform: rotateY(0);
          -ms-transform: rotateY(0);
          transform: rotateY(0);
          left: 0;
          background: #7FC6A6;
        }
        .tgl-flip:checked + .tgl-btn:active:after {
          -webkit-transform: rotateY(20deg);
          -ms-transform: rotateY(20deg);
          transform: rotateY(20deg);
        }
    </style>
</head>

<body>
    <h2>Toggle it!</h2>
    <ul class='tg-list'>
      <li class='tg-list-item'>
        <h4>Light</h4>
        <input class='tgl tgl-light' id='cb1' type='checkbox'>
        <label class='tgl-btn' for='cb1'></label>
      </li>
      <li class='tg-list-item'>
        <h4>iOS 7</h4>
        <input class='tgl tgl-ios' id='cb2' type='checkbox'>
        <label class='tgl-btn' for='cb2'></label>
      </li>
      <li class='tg-list-item'>
        <h4>Skewed</h4>
        <input class='tgl tgl-skewed' id='cb3' type='checkbox'>
        <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'></label>
      </li>
      <li class='tg-list-item'>
        <h4>Flat</h4>
        <input class='tgl tgl-flat' id='cb4' type='checkbox'>
        <label class='tgl-btn' for='cb4'></label>
      </li>
      <li class='tg-list-item'>
        <h4>Flip</h4>
        <input class='tgl tgl-flip' id='cb5' type='checkbox'>
        <label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label>
      </li>
    </ul>
    <div style="text-align:center;clear:both">
    </div>
</body>

</html>

这里写图片描述

Forever_SJ521
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS 打造立体酷炫checkbox
liuhao9999的博客
07-06 218
CSS 打造立体酷炫checkbox
自定义复选框checkbox样式
热门推荐
justforuse的博客
07-31 4万+
复选框作为网页中比较常见的一个组件，有的时候我们需要对它进行美化，但是我们无法直接为其定义样式，所以我们需要一些其它的办法。表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的。html:<body> <input type="checkbox" id="myCheck"> <label for="myCh
html 复选框 特效 大,3种炫酷CSS3复选框checkbox动画特效
weixin_39599166的博客
06-03 361
这是一款效果非常炫酷的CSS3复选框checkbox动画特效。这组复选框动画特效共3种效果，它们都是在原生checkbox元素的基础上进行了美化，在用户点击复选框的时候制作出非常酷的动画效果。使用方法HTML结构普通的HTML checkbox复选框控件的样式非常的平淡。在现代网页设计中，我们可以通过CSS3来为它设置更加漂亮的外观和动画特效。通过CSS的@keyframe属性，我们就可以制作出各...
CSS中实现图片边框的酷炫效果
最新发布
jun778895的博客
07-29 1256
在CSS中实现图片边框的酷炫效果是一个既有趣又富有创意的任务，它不仅能够提升网页的视觉吸引力，还能通过不同的样式和动画效果给用户带来更加丰富的视觉体验。以下，我将详细探讨几种使用CSS为图片添加边框的酷炫方法，每种方法都会包含代码示例、适用场景以及可能的扩展思路，以确保内容不低于2500字。
input美化 checkbox和radio样式
dianyizhu5854的博客
12-19 210
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式，有没有想要改变一下呢？比如下面的样式： 　比起html默认的样式，上图这些是不是美观多了呢？并且这样的input美化，无需jquery插件，只要几行css代码就可以。 思路 　 思路很简单：（1）将之前的按钮透明度opacity设置...
总结：如何修改美化radio、checkbox的默认样式
weixin_33852020的博客
11-30 1250
现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。 原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是...
CSS3炫酷自定义Checkbox特效.zip
11-17
本压缩包“CSS3炫酷自定义Checkbox特效.zip”提供了实现这一效果的相关资源。 Checkbox是HTML中的一个基本元素，通常用于用户在一组选项中进行单选或多选。在传统的HTML中，Checkbox的样式受到浏览器的限制，通常...
5种CSS3炫酷效果的自定义Checkbox特效代码.zip
10-31
这个名为“5种CSS3炫酷效果的自定义Checkbox特效代码”的压缩包文件显然包含了一些示例，展示了如何利用CSS3来美化传统的HTML复选框（Checkbox）。让我们详细探讨这些效果及其背后的CSS3技术。 1. **CSS3伪类与过渡...
CSS3实现自定义Checkbox特效实例代码
09-24
主要给大家介绍了利用CSS3实现自定义Checkbox特效的相关资料，文中给出了完整的实例代码供大家参考学习，相信对大家学习自定义Checkbox样式具有一定的参考价值，感兴趣的朋友们下面来一起看看吧。
使用css修改input框中checkbox的样式
qq_27009517的博客
08-11 5908
概述 在页面设计时，我们经常使用input复选框。由于界面设计的需要，我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂，通常修改的方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单，但是需要预先设计或者下载图片，比较麻烦。纯css的方法，只需要在css文件中编写代码，个人觉得比较方便，因此，本文使用该方式对input中的CheckBox进行设置。 实现效果 本文在设计时，希望达到以下效果，如图所示，每...
checkboxcss是一组效果非常炫酷的checkbox复选框CSS3动画特效
08-08
checkbox.css是一组效果非常炫酷的checkbox复选框CSS3动画特效。通过使用checkbox.css样式，可以在点击复选框时产生各种非常酷的CSS3动画效果。
一个样式（左右滑动选中的checbox）
06-25
一个样式（左右滑动选中的checbox）,模仿安卓中滑动选中的效果，仅供参考。
12种checkbox复选框CSS3动画特效
12-13
checkbox.css是一组效果非常炫酷的checkbox复选框CSS3动画特效。通过使用checkbox.css样式，可以在点击复选框时产生各种非常酷的CSS3动画效果。
纯CSS3炫酷checkbox美化库checkboxes.css
12-13
checkboxes.css是一款纯CSS3炫酷checkbox复选框美化库。checkboxes.css可以通过在HTML代码中简单的class配置，生成多种不同效果的checkbox美化样式。
input type="checkbox" 样式美化
qq_37514029的博客
07-26 581
代码结果展示 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <style> .selected_remind_input input[...
html 复选框 特效 大,HTML5 SVG炫酷checkbox复选框动画特效
weixin_29552845的博客
06-03 320
这是一款HTML5 SVG炫酷checkbox复选框动画特效。该checkbox动画特效使用svg来构建复选框效果，然后通过CSS3动画来控制复选框的选中和取消选中状态，效果非常炫酷。使用方法在页面中引入fency-checkbox.css文件。HTML结构一个SVG checkbox复选框的基本HTML结构如下：width="50px" height="50px" viewBox="0 0 50...
自定义input checkbox样式
skysys的研究小屋
08-21 422
input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;} input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 1..
input checkbox样式美化
facccccer
07-15 1万+
最近在学校做自己的学习实践项目中，用到了checkbox，想实现的是，在登陆界面的中的那个记住我的选框。我们都知道，原生的checkbox样式不能满足咱们的需求。所以接下来，让我自己动动手，换种方式美化一下吧。
html 复选框 特效 大,纯CSS+HTML自定义checkbox效果
06-01
好的，这个问题我可以帮你回答。下面是一个简单的纯CSS+HTML自定义checkbox效果代码，可以实现复选框的特效： ```html <label class="checkbox"> <input type="checkbox"> <span class="checkmark"></span> </label> ``` ```css .checkbox { position: relative; display: inline-block; cursor: pointer; padding-left: 25px; margin-right: 15px; font-size: 16px; line-height: 20px; } .checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid #ccc; border-radius: 3px; } .checkbox:hover input ~ .checkmark { background-color: #f2f2f2; } .checkbox input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } .checkbox input:checked ~ .checkmark:after { display: block; } .checkbox .checkmark:after { left: 7px; top: 3px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } ``` 这个代码会生成一个带有特效的复选框，当鼠标悬停在复选框上时会有灰色背景，选中时会有蓝色背景，并且复选框内会有一个白色的勾。 希望这个代码对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值