CSS3模拟IOS滑动开关效果

时间：2021-05-08

前言

H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释

效果

代码

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>CSS3模拟IOS开关</title>
  • <styletype="text/css"media="screen">
  • html{
  • font-size:100px;
  • }
  • .ios-checkbox{
  • height:4rem;
  • width:4rem;
  • position:absolute;
  • left:50%;
  • top:50%;
  • -webkit-transform:translate(-50%,-50%);
  • transform:translate(-50%,-50%);
  • border:.05remdashed#3DB7A9;
  • display:-webkit-box;
  • display:-webkit-flex;
  • display:-ms-flexbox;
  • display:flex;
  • -webkit-box-orient:horizontal;
  • -webkit-box-direction:normal;
  • -webkit-flex-direction:column;
  • -ms-flex-direction:column;
  • flex-direction:column;
  • -webkit-flex-wrap:nowrap;
  • -ms-flex-wrap:nowrap;
  • flex-wrap:nowrap;
  • -webkit-justify-content:space-around;
  • -ms-flex-pack:distribute;
  • justify-content:space-around;
  • -webkit-box-align:center;
  • -webkit-align-items:center;
  • -ms-flex-align:center;
  • align-items:center;
  • }
  • .emulate-ios-button{
  • display:block;
  • width:2rem;
  • height:1rem;
  • background:#ccc;
  • border-radius:5rem;
  • cursor:pointer;
  • position:relative;
  • -webkit-transition:all.3sease;
  • transition:all.3sease;
  • }
  • .emulate-ios-button:after{
  • content:'';
  • display:block;
  • width:.9rem;
  • height:.9rem;
  • border-radius:100%;
  • background:#fff;
  • box-shadow:01px1pxrgba(0,0,0,.1);
  • position:absolute;
  • left:.05rem;
  • top:.05rem;
  • -webkit-transform:translateZ(0);
  • transform:translateZ(0);
  • -webkit-transition:all.3sease;
  • transition:all.3sease;
  • }
  • .emulate-ios-button:active:after{
  • width:1.1rem;
  • }
  • .raw-checkbox{
  • height:2rem;
  • width:2rem;
  • }
  • .raw-checkbox:checked+label{
  • background:#34bf49;
  • }
  • .raw-checkbox:checked+label:after{
  • left:1.05rem;
  • }
  • .raw-checkbox:checked+label:active:after{
  • left:.5rem;
  • }
  • .raw-checkbox:disabled+label{
  • background:#d5d5d5;
  • pointer-events:none;
  • }
  • .raw-checkbox:disabled+label:after{
  • background:#bcbdbc;
  • }
  • </style>
  • </head>
  • <body>
  • <divclass="ios-checkbox">
  • <inputtype="checkbox"id="ios-checkbox"name="emulate-ios-button"class="raw-checkbox">
  • <labelfor="ios-checkbox"class="emulate-ios-button"></label>
  • </div>
  • </body>
  • </html>

  • 总结

    为了更直观的比较,raw checkbox我就没有隐藏了。

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章