css实现小黄人可爱开关切换按钮效果代码-html代码-BFW代码库

css实现小黄人可爱开关切换按钮效果代码

代码语言：html

代码描述：css实现小黄人可爱开关切换按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
@charset "UTF-8";*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.clearfix{clear:both;margin:40px}body{background-color:#eee;text-align:center;padding-top:30px}h1{color:#402E1D;margin-bottom:30px}.minion-switcher{width:120px;height:60px;display:inline-block;position:relative}.minion-switcher .check{width:120px;height:60px;padding:0;cursor:pointer;opacity:0;outline:0;border:0;position:absolute;top:0;left:0;z-index:10}.minion-switcher .btn{background:#ffcd01;width:120px;height:60px;border-radius:120px;overflow:hidden;position:absolute;top:0;box-shadow:0 1px #C2BEAD}.minion-switcher .btn:before,.minion-switcher .btn:after{font-family:sans-serif;color:white;position:absolute;top:50%;transform:translateY(-50%);-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.minion-switcher .btn:before{content:"✓";left:22px;font-size:26px}.minion-switcher .btn:after{content:"X";right:22px;font-size:0}.minion-switcher.reverse .btn:before{font-size:0}.minion-switcher.reverse .btn:after{font-size:26px}.minion-switcher.reverse .eye{left:3px;right:auto}.minion-switcher.reverse .eye .eye-inner .eye-brown{margin-right:10px;margin-top:61%;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.minion-switcher.reverse .eye .eye-cover{top:0}.eye{width:54px;height:54px;border-radius:54px;border:7px solid #878787;overflow:hidden;position:absolute;top:3px;right:3px;z-index:1;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.eye .eye-back{width:44px;height:44px;border-radius:440px;margin:-2px;background-color:#fff;-webkit-transform:scaleY(0.75);-ms-transform:scaleY(0.75);transform:scaleY(0.75);position:absolute}.eye .eye-inner{position:relative;height:100%;width:100%;text-align:center}.eye .eye-inner .eye-brown{width:12px;height:12px;display:inline-block;background-color:#402E1D;border-radius:12px;margin-top:50%;transform:translateY(-50%);position:relative;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.eye .eye-inner .eye-brown:before{content:"&qu.........完整代码请登录后点击上方下载按钮下载查看