Roller，✨✨

on 2016-11-22 | by 小撸 0 关注作者

看到个好玩的~哈哈，小志前辈写的，原文地址

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <title>Roller，✨✨</title>
    <style type="text/css" media="screen">
    div, input {
      margin: 0;
      padding: 0;
    }
    .demo {
        width: 100px;
        height: 20px;
        overflow: hidden;
    }

    .star_ctrl {
        float: left;
    }

    input {
        float: right;
        width: 20px;
        height: 20px;
        -webkit-appearance: none;
        border: 0 none;
        background: url(http://ww3.sinaimg.cn/large/006tNbRwgw1fa10606xkoj300k01fdfl.jpg) no-repeat 0 -32px;
        outline: 0 none;
        -webkit-transition: all 100ms linear;
    }

    input:checked,
    input:checked ~ input {
        background-position: 0 0;
    }

    .demo_2 input {
      float: left;
    }
    </style>
</head>

<body>
    <div class="demo demo_1">
        <div class="star_ctrl">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
        </div>
    </div>

    <div class="demo demo_2">
        <div class="star_ctrl">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
        </div>
    </div>
</body>

</html>

左转转，右转转 ^-^

文章来源：

Author：小撸
link：http://www.60sky.com/post/roller-stars.html