js单选按钮动画特效

来源：互联网发布：java web项目规范编辑：程序博客网时间：2024/05/19 10:15

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio</title>
<style>
.radio-2 {
width: 900px;
padding: 3% 0;
margin: 50px auto;
background-color: darkseagreen;
text-align: center;
}

.radio-2 label {
display: inline-block;
width: 28px;
height: 28px;
overflow: hidden;
border: 1px solid #eeeeee;
border-radius: 100%;
margin-right: 10px;
background-color: #ffffff;
position: relative;
cursor: pointer;
}

.radio-2 label:after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
background-color: #666666;
border-radius: 50%;
transform: rotate(-180deg);
transform-origin: -2px 50%;
transition: transform .2s ease-in;
}

.radio-2 [type="radio"] {
display: none;
}

.radio-2 [type="radio"]:checked + label:after{
transform: rotate(0deg);
transition: transform .2s ease-out;
}
</style>
</head>
<body>
<div class="radio-2">
<input type="radio" name="radio-2" id="radio-2-1" checked="checked">
<label for="radio-2-1"></label>

<input type="radio" name="radio-2" id="radio-2-2">
<label for="radio-2-2"></label>

<input type="radio" name="radio-2" id="radio-2-3">
<label for="radio-2-3"></label>
</div>
<a href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551290&idx=2&sn=3484ecbd7f8a1b854cc13eaa7be21094&chksm=8025a1fbb75228edae0d2669853659f2a9a6f7d3cb7a8592f80f77540f3186cdb83adfe29a3f&scene=4#wechat_redirect">博文链接</a>
</body>
</html>

0 0