radio单选框效果代码（css3）

来源：互联网发布：js弹出确认对话框编辑：程序博客网时间：2024/06/05 15:51

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><!-- radio2 --><style type="text/css">.radio-2{width:900px;margin:100px auto; background-color: #f0f;padding:10% 0%;text-align: center;}.radio-2 [type="radio"]{display: none;}.radio-2 label{display:inline-block;width: 28px;height: 28px;border-radius: 100%;boder:1px solid #eee;background-color:#fff; position: relative;margin-right: 10px;}.radio-2 label:after{content: "";width: 20px;height: 20px;border-radius: 50%;background-color: red;position: absolute;top:4px;left: 4px;transform: scale(0);transition: transform .2s ease-out;}.radio-2 [type="radio"]:checked+label{background-color: green;transition:all .3s ease-in;}.radio-2 [type="radio"]:checked+label:after{transform: scale(1);transition:all .3s ease-in;}</style><div class="radio-2"><input type="radio" name="radio-2" id="radio-2-1" checked="checked"><!-- label for id --><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>

0 0