css3复选框美化及页面滚动

css的东西还是更新得快呀。(主要是js比较菜),这里主要是把checkbox美化一下,radio什么的参考checkbox一样的道理,css能做的东西还是挺多的,虽然不是那么实用,但是选项卡,页面滚动,图片轮播什么的,都可以做,今天的主角就是css3的:checked外加上css3的~+选择
:checked是被选中的 input 元素,当这东西后面跟上~+后,你就可以让选中的input对应的标签做点事情了。~ 兄弟选择符,是指选择元素后面的所有兄弟元素,比如a~p就是指a标签后面所有的p标签。+ 相邻选择符,是指选择元素后面相邻的兄弟元素,这个只选择一个。

浏览器自带的复选框和单选框的样式简直对不起这网络信息的发展:
复选框:  单选框  3

是不是丑出天际了,我们的工作就是把丑的东西改装成美的东西给用户看的,自然少不了各种美化了,先来个checkbox的切换吧:

<label class="switch">
    <input type="checkbox">
    <div class="switchbox"></div>
</label>


 input[type="checkbox"]{
    display: none;
}
 label.switch{
        display: inline-block;
        width: 60px;
        height: 30px;
        cursor: pointer;
}
label.switch .switchbox{
    height: 100%;
    box-sizing: border-box;
    position: relative;
    border-radius: 34px;
    background-color: #e5e5e5;
    transition: all 0.3s;
}
label.switch input[type="checkbox"]+.switchbox:after{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    transition: all 0.3s;
    background-color: #ffffff;
    transform: translateX(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
    label.switch input[type="checkbox"]+.switchbox:before{
    content: ' ';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 56px;
    border-radius: 26px;
    box-sizing: border-box;
    height: 26px;
    background: #fff;
    z-index: 1;
    transition: all 0.3s;
    transform: scale(1);
}
label.switch input[type="checkbox"]:checked+.switchbox{
    background-color: #4cd964;
}
label.switch input[type="checkbox"]:checked+.switchbox:after{
    transform: translateX(30px);
}
label.switch input[type="checkbox"]:checked+.switchbox:before{
    transform: scale(0);
}

首先我们要把丑陋的checkbox给隐藏掉,用label把checkbox包裹住,这样点击label会触发checkbox的选择,然后主要是用:checked+,当checkbox选中后选择switchbox和switchbox的伪元素进行变化,加上一个过渡动画什么的就改装好了,当然其他什么的也是这个原理,css代码太多了,就不一一贴出来了,有兴趣的去看代码链接吧。
来看看所有改装的样式:

至于css滚动则是用几个radio,将其opacity设为0;让其透明,然后覆盖在文字上,你点击文字就选中了radio,body只显示当前窗口,超出隐藏,然后通过:checked ~让.main的transform: translateY变化,就达到了滚动的效果;

<input type="radio" name="nav" class="nav-1" checked="checked"/>
    <a  class="nav">首页</a>
    <input type="radio" name="nav" class="nav-2"/>
    <a  class="nav">新闻</a>
    <input type="radio" name="nav" class="nav-3"/>
    <a  class="nav">娱乐</a>
    <input type="radio" name="nav" class="nav-4"/>
    <a  class="nav">音乐</a>
    <input type="radio" name="nav" class="nav-5"/>
    <a  class="nav">其他</a>

<section class="main">
</section>


    .nav-1:checked ~ .main{
        transform: translateY(0%);
    }
    .nav-2:checked ~ .main{
        transform: translateY(-100%);
    }
    .nav-3:checked ~ .main{
        transform: translateY(-200%);
    }
    .nav-4:checked ~ .main{
        transform: translateY(-300%);
    }
    .nav-5:checked ~ .main{
        transform: translateY(-400%);
    }
本文示例:链接
本文代码地址:链接

您也可能喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注