首页 > 代码库 > 单选特效
单选特效
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>HTMLHint</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="css/index.css" rel="stylesheet"> <style id="ace_editor"> .radio-1 { width: 900px; padding: 3% 0%; margin: 10px auto; background-color: darkseagreen; text-align: center; } .radio-1 label { display: inline-block; position: relative; width: 28px; height: 28px; border: 1px solid #cccccc; border-radius: 100%; cursor: pointer; background-color: #ffffff; margin-right: 10px; } .radio-1 label:after { content: ""; position: absolute; width: 20px; height: 20px; top: 4px; left: 4px; background-color: #666; border-radius: 50%; transform: scale(0); transition: transform .2s ease-out; } .radio-1 [type="radio"]:checked + label { background-color: #eeeeee; transition: background-color .2s ease-in; } .radio-1 [type="radio"]:checked + label:after { transform: scale(1); transition: transform .2s ease-in; } .radio-1 [type="radio"]{ display: none; } /*第二种*/ .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-1"> <input type="radio" name="radio-1" id="radio-1-1" checked="checked"> <label for="radio-1-1"></label> <input type="radio" name="radio-1" id="radio-1-2"> <label for="radio-1-2"></label> <input type="radio" name="radio-1" id="radio-1-3"> <label for="radio-1-3"></label> </div> <!-- 第二种 --> <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> </body> </html>
摘自：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551290&idx=2&sn=3484ecbd7f8a1b854cc13eaa7be21094&chksm=8025a1fbb75228edae0d2669853659f2a9a6f7d3cb7a8592f80f77540f3186cdb83adfe29a3f&scene=4#wechat_redirect
单选特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。