有趣的超人蝙蝠侠选择开关按钮

可用于在线竞赛、电竞用户支持率调查类页面。

button, toggle, switch

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2862
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    var option = $('.option'),
        _this, bg = $('#bg');

function switchChoice() {
        _this = $(this);

if (_this.hasClass('selected'))
            return false;
        else {
            $('.option.selected').find('.circle').addClass('increase-width');
            setTimeout(function() {
                $('.option.selected').find('.circle').addClass('width-zero');
            }, 300);

setTimeout(function() {
                _this.find('.circle').addClass('move-right');
                bg.toggleClass('op');
            }, 150);

setTimeout(function() {
                _this.find('.circle').addClass('width-exact');
                bg.toggleClass('big nobg');
            }, 600);

setTimeout(function() {
                $('.option.selected').removeClass('selected');
                _this.addClass('selected');

bg.toggleClass('op nobg big');

if ($('.option.selected').hasClass('superman'))
                    bg.addClass('superman');
                else
                    bg.removeClass('superman');

$('.circle').removeClass('increase-width width-zero move-right width-exact');
            }, 800);
        }
    }

option.on('click', switchChoice);
});

编译

CSS

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body,
html {
    height: 100%;
    min-height: 100%;
}
body {
    margin: 0;
    font-family: 'Encode Sans Expanded', sans-serif;
    background-color: #8898ff;
}
#app-cover {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 380px;
    height: 200px;
    margin: -100px auto;
}
#app {
    position: relative;
    height: 140px;
    padding: 30px;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
}
#label-1 {
    color: #5f6065;
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 8px;
}
#label-2 {
    color: #aba9a9;
    font-size: 14px;
    margin-bottom: 25px;
}
.option {
    position: relative;
    font-size: 16px;
    margin-bottom: 14px;
    cursor: pointer;
    z-index: 0;
}
.circle {
    left: 0;
    width: 20px;
    background-color: #eaecff;
}
.circle:before {
    content: '';
    width: 60px;
    left: -90px;
    background-color: #8898ff;
    transition: 0.3s ease all;
}
.circle,
.circle:before {
    position: absolute;
    top: 0;
    height: 20px;
    border-radius: 100px;
}
.option.selected .circle:before,
.option .circle.move-right:before,
.option .circle.width-exact:before {
    left: 0;
    width: 20px;
}
.option.selected .circle.increase-width:before,
.option .circle.move-right:before {
    left: -40px;
    width: 60px;
}
.option.selected .circle.width-zero:before {
    width: 0;
}
.option-text {
    color: #5f6065;
    padding-left: 34px;
}
#bg {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 130px;
    height: 150px;
    background-size: 130px;
    background-repeat: no-repeat;
    background-position: 100%;
    background-image: url(http://k003.kiwi6.com/hotlink/o0t7mldy36/batman.png);
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: 0.6s cubic-bezier(0.18, 0.89, 0.29, 1.05) all;
    z-index: 1;
}
#bg.superman {
    background-image: url(http://k003.kiwi6.com/hotlink/12adunj55b/superman.png);
}
#bg.op {
    opacity: 0;
}
#bg.nobg {
    background-image: none;
}
#bg.big {
    -webkit-transform: scale(3);
    transform: scale(3);
}

HTML

可用于在线竞赛、电竞用户支持率调查类页面。

button, toggle, switch

编辑器支持Emmet

快捷键

可用于在线竞赛、电竞用户支持率调查类页面。

button, toggle, switch

一款很棒的粘稠按钮上中下三选开关

纯CSS实现3D版本的双选标签文本（Yes | No）开关按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：