html+css 实现单选按钮动画（input radio按钮）

news2024/11/20 23:21:11

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

文章目录

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

效果

html+css 实现单选按钮动画（input radio按钮）

原理解析

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

input通过checked进行选中

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

单选按钮的圆形实现,是通过input后面的span元素的伪类before实现的。

单选按钮的圆形实现

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

对号的实现是由2部分组成的。input后面的span元素的伪元素实现的after伪元素和before伪元素

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 radio按钮）</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
        radio按钮）</h1>
    <div class="wrapper">
        <p>会给我三连吗？</p>
        <div class="input-box">
            <label>
                <input type="radio" name="yes_no">
                <span class="yes radioSpan"></span>
                必须滴
            </label>

        </div>
        <div class="input-box">
            <label>
                <input type="radio" name="yes_no">
                <span class="yes radioSpan"></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);
}