PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML+CSS > 正文

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

    作者:admin来源:网络浏览:时间:2017-08-04 10:04:57我要评论
    分享到
    导读:css+字体实现五角星(半颗星、1/3颗星)评分效果这个用到了 webFontIcon 字体,自行下载。1.css样式.cleanfloat::after{display:block;cl...
    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> 

     

    转载请注明(B5教程网)原文链接:http://www.bcty365.com/content-70-5906-1.html
    相关热词搜索: css五角星 css评分效果
    下一篇:最后一页
    网友评论: