单选特效 

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

posted @ 2016-10-09 16:34  蛋Mrs炒饭  阅读(120)  评论(0)  编辑  收藏  举报