html+css 实现多选按钮动画（input checkbox按钮）

news2024/11/16 13:05:03

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

文章目录

效果
原理解析
- 1.纯css实现，没有js。点击事件是==input的checked==实现的。
- 2.当==点击==的时候==input自动添加checked==,改变input后面的==span元素==来实现动画效果。
- - 2.1 多选按钮的圆形实现,是通过input后面的span元素的==伪类before和after==实现的
  - 2.2对号的实现，是通过input后面的span元素的伪类before和span元素的伪类after实现，并且旋转一定角度就实现了。
- 3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
上代码，可以直接复制使用
- 目录
- html
- css

效果

原理解析

1.纯css实现，没有js。点击事件是input的checked实现的。

通过input的checked实现点击效果

2.当点击的时候input自动添加checked,改变input后面的span元素来实现动画效果。

2.1 多选按钮的圆形实现,是通过input后面的span元素的伪类before和after实现的

多选按钮样式效果
效果图示绘制方法
代码图示绘制方法

2.2对号的实现，是通过input后面的span元素的伪类before和span元素的伪类after实现，并且旋转一定角度就实现了。

对号的实现原理图示

对号按钮代码效果

3.具体的变换参数，直接看代码，可以一键复制，查看效果

上代码，可以直接复制使用

html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>html+css 实现多选按钮动画（input checkbox按钮）</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <div class="container">
        <h1 style="text-align: center;color:#382F45;margin-bottom: 50px;padding-top: 50px">html+css 实现多选按钮动画（input checkbox按钮）</h1>
        <div class="wrapper">
            <p>会给我三连吗？</p>
            <div class="input-box">
                <label>
                    <input type="checkbox" name="yes_no">
                    <span class="yes"></span>
                    必须滴
                </label>

            </div>
            <div class="input-box">
                <label>
                    <input type="checkbox" name="yes_no">
                    <span class="yes"></span>
                    一定给
                </label>
            </div>
            <div class="input-box">
                <label>
                    <input type="checkbox" name="yes_no">
                    <span class="yes"></span>
                    支持一波！
                </label>
            </div>
            <div class="input-box">
                <label>
                    <input type="checkbox" name="yes_no">
                    <span class="yes"></span>
                    点赞，收藏，关注！
                </label>
            </div>
            <div class="input-box">
                <label>
                    <input type="checkbox" name="yes_no">
                    <span class="yes"></span>
                    先收藏，以防找不到了！
                </label>
            </div>
        </div>

    </div>
</body>

</html>

css

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
.container{
    min-height: 100vh;
    /* 渐变背景 */
    background: linear-gradient(200deg,#e4efe9,#93a5cf);
}

.wrapper{
    width: 600px;
    margin: 0 auto;
    background-color: #382f45;
    border-radius: 20px;
    /* 弹性布局 垂直排列 居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 阴影 */
    box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
    padding: 30px;
}
p{
    color: #fff;
    font-size: 40px;
    letter-spacing: 5px;
}
.input-box{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    padding-left: 50px;
}
.input-box label{
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 32px;
    color: #fff;
    letter-spacing: 5px;
}
.input-box label span{
    /* 相对定位 */
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 15px;
    /* 设置过渡 */
    transition: 0.5s;
}
/*绘制多选按钮的方框*/
.input-box label span::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    /* 通过阴影的方式绘制上边框 */
    box-shadow: 0 -26px 0 #fff;
    transition: 0.5s;
}
.input-box label span::after{
    content: "";
    /* 绝对定位 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4px;
    height: 100%;
    background-color: #fff;
    /* 通过阴影的方式绘制右边框 */
    box-shadow: 26px 0 0 #fff;
    transition: 0.5s;
}
.input-box label .radioSpan::before{
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    /* 通过阴影的方式绘制圆 */
    box-shadow: 0 0 0 4px #fff;
}
.input-box label .radioSpan::after{
    width: 0;
    height: 0;

}

.input-box input{
    display: none;
}
/*选中的操作*/
.input-box label input:checked ~ span.yes::before{
    background-color: #0f0;
    box-shadow: none;
    height: 4px;
    border-radius: 0;
}
.input-box label input:checked ~ span.yes::after{
    background-color: #0f0;
    box-shadow: none;
    width: 4px;
    height: 55%;
}
.input-box label input:checked ~ span.yes{
    border-radius: 0;
    transform: rotate(-45deg) translate(2px,-10px);
}

.input-box label input:checked ~ span.no::before{
    width:100%;
    height: 4px;
    background-color: #f00;
    box-shadow: none;
    border-radius: 0;
    transform: rotate(-45deg) translate(7px,-8px);
}
.input-box label input:checked ~ span.no::after{
    width: 4px;
    height: 100%;
    background-color: #f00;
    box-shadow: none;
    transform: rotate(-45deg) translate(7px,11px);
}