您的位置：首页 > Web前端 > JavaScript

js单选按钮动画特效

2016-09-28 09:35 337 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航