您现在的位置: 首页 > 开发编程 > HTML+CSS > 正文

css+字体实现五角星(半颗星、1/3颗星)评分效果

作者:admin来源:网络浏览:时间:2017-08-04 10:04:57我要评论
分享到
css+字体实现五角星(半颗星、1/3颗星)评分效果

css+字体实现五角星(半颗星、1/3颗星)评分效果

这个用到了 webFontIcon 字体,自行下载。

1.css样式

  1. .cleanfloat::after{displayblockclearbothcontent:""visibilityhiddenheight0;} 
  2.         *{margin:0padding:0;} 
  3.  
  4.         /*字体路径按照你的路径去修改*/ 
  5.          @font-face { 
  6.             font-family'AlluraRegular'
  7.             srcurl('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.eot'), 
  8.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont?#iefix'format('embedded-opentype'),  
  9.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.woff'format('woff'), 
  10.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.ttf'format('truetype'), 
  11.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.svg#AlluraRegular'format('svg'); 
  12.         } 
  13.         .starFive span {displayblock;floatleft;font-size25pxfont-family'AlluraRegular'
  14.             text-aligncenter;color#888;width27px;height33px;line-height33px
  15.             margin-right5px;positionrelative;overflowhidden;white-spacepre
  16.          } 
  17.         .starFive span:before {positionabsolute
  18.             left: 0;top: 0;displayblock;width50%
  19.             contentattr(data-content);overflowhidden;color#F63
  20.         } 
  21.         .sF1 span:before{width70%;} 
  22.         .sF2 span:before{width50%;} 
  23.         .sF3 span:before{width40%;} 
  24.         .starFive .org_star {color#F63;} 
  25.         .starFive b {font-weightnormalline-height40px
  26.             font-size25px;color#888;margin-left10px
  27.         } 

 html内容
 

  1. <div> 
  2.       <p class='cleanfloat starFive sF1'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><b>4.7分</b></p> 
  3.       <p class='cleanfloat starFive sF2'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><b>3.5分</b></p> 
  4.       <p class='cleanfloat starFive sF3'><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><span>R</span><b>2.4分</b></p> 
  5.  </div> 

 

相关热词搜索: css五角星 css评分效果