• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

纯css3星星评分

精选代码 Tomy 400次浏览 已收录 0个评论 扫描二维码
<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <title>纯css3星星评分</title>
  <style>
   form{width:90%;max-width:200px;margin:0 auto;}
    h2{text-align:center;margin-top:5em;}
    .chrome{margin-bottom:4em;}
    .chrome>input{position:relative;margin-right:1em;border:0;background:transparent;color:gold;-webkit-transition:color .8s;
      transition:color .8s;}
    .chrome>input:nth-of-type(1){display:none;}
    .chrome>input:before{position:absolute;content:"★";left:0;top:0;font-size:32px;height:100%;width:100%;background:#FFF;cursor:pointer;}
    .chrome>input:checked~input{color:#666;}
    .all>input{opacity:0;position:absolute;width:2em;height:2em;margin:0;cursor:pointer;}
    .all>input:nth-of-type(1),
    .all>span:nth-of-type(1){display:none;}
    .all>span{font-size:2em;color:gold;
      -webkit-transition:color .8s;
      transition:color .8s;
    }
    .all>input:checked~span{color:#666;}
    .all>input:checked+span{color:gold;}
  </style>
 </head>
 <body>
  <h2>纯css3星星评分</h2>
  <form>
   hugeannex设计<br /><br />
     chrome:
    <p class="chrome">
      <input type="radio" name="a" value="0" checked="checked" />
      <input type="radio" name="a" value="1" />
      <input type="radio" name="a" value="2" />
      <input type="radio" name="a" value="3" />
      <input type="radio" name="a" value="4" />
      <input type="radio" name="a" value="5" />
    </p>
    css3兼容:
    <p class="all">
      <input type="radio" name="b" value="0" checked="checked" />
      <span>★</span>
      <input type="radio" name="b" value="1" />
      <span>★</span>
      <input type="radio" name="b" value="2" />
      <span>★</span>
      <input type="radio" name="b" value="3" />
      <span>★</span>
      <input type="radio" name="b" value="4" />
      <span>★</span>
      <input type="radio" name="b" value="5" />
      <span>★</span>
    </p>
  </form>
<!--原文链接 http://www.yangsj.tk/?p=111 -->
 </body>
</html>

代码演示
杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明纯css3星星评分
喜欢 (0)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址