css实现半颗星评分效果
效果如下:
![]() |
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;} *{margin:0; padding:0;} /*字体路径按照你的路径去修改*/ @font-face { font-family: 'AlluraRegular'; src: url('fonts/websymbols-regular-webfont.eot'), url('fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'), url('fonts/websymbols-regular-webfont.woff') format('woff'), url('fonts/websymbols-regular-webfont.ttf') format('truetype'), url('fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg'); } .starFive span {display: block;float: left;font-size: 15px; font-family: 'AlluraRegular'; text-align: center;color: #888;width:16px;height:23px;line-height: 23px; margin-right: 5px;position: relative;overflow: hidden;white-space: pre; } .starFive span:before {position: absolute; left: 0;top: 0;display: block;width: 50%; content: attr(data-content);overflow: hidden;color: #F63; } .sF1 span:before{width:42%;} .sF2 span:before{width:96%;} .sF3 span:before{width:50%;} .starFive .org_star {color: #F63;} .starFive b {font-weight: normal; line-height: 40px; font-size: 25px;color: #888;margin-left: 10px; } </style> </head> <body> <div> <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> <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> <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> </div> </body> </html>
下载的字体:字体文件下载
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2014-09-24 javascript点击图片放大的功能(原生)
2014-09-24 jquery图片播放插件Fancybox(灯箱)
2014-09-24 js制作圆角按钮(兼容谷歌,ie7,ie8)
2014-09-24 css滑动门制作圆角按钮