51rgb-css3动画14-css3制作星星评分功能

分享 :

网盘下载链接:

提取密码: u4qi
复制提取密码
51RGB在线教育,WEB前端开发直播体验课,css3制作星星评分功能!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-26

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    415次

    源码,可以直接复制使用!

    <!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.w3cfuns.com/notes/11445/e7aee4ec375393f7ce3951ad1a93e151.html -->
     </body>
    </html>
    
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:http://www.51rgb.cn/video/page-29/281.html

    关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

  • 相关下载
在线客服
热线电话

微信公众账号