首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css - 评分效果的星星✨外衣

什么星星外衣?好,直接上图比较能说清楚: ? 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数。 分步骤图: ? ? ? ? ?...彩色星星的实现: 利用这个思路,其实彩色进度条和彩色星星进度条就是差星星(这也是一句废话) 但关键思路点在于,不要把星星看做是进度条。 也就是说星星评分和一般的进度条效果实现起来一样。...唯一的区别是有无星星。 那怎么把普通进度条加上星星呢?我的设计专业还是给了我一丝灵感: 只要在彩色进度条上边覆盖一个镂空的星星图案,看到的不就都是星星了吗?! 比如这样的: ?...代码设计上,还是和之前的进度条一样,背景色初始为灰色,星星盖在上边就是五个灰色的小星星 ? ?...然后当有数据值得时候,改变彩色条span.progress的宽度为百分比即可实现视觉上星星个数的变化 ? ? ?

1.7K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iOS实践:一步步实现星级评分1. 创建星星2. 优化3. 灵异事件

    星级评分在几乎每一个电商平台都会出现,其实在这个星级评分里面不管有多少分,最终我们只用到了三张图片。我们把这个星级评分抽象出来看,每颗星星只有三种状态,半星、满星、空星。...Paste_Image.png 需求如下: 满分为5分; 整数用整个星星显示; 小数用半颗星星表示; 不足5分的部分,用空星星表示。 经过分析,可以按照下面的思路来进行开发。...创建星星 首先重写了评分的set方法,这样一旦给星级进行评分,就可以进行直接变成星星输出。 满星:其实就是分数取整。所以对分数转成了NSInteger,直接当作满星的个数。...空星:星星的总个数- 满星数量- 半星的数量 在这里为了能够容易修改以后最大的评级分数,所以把总分定义了宏STAR_AMOUNT_NUMBER。 例如评分是3.7分。.../** 根据图片的名称,以及相应的个数,创建星星的图层 @param imageName 星星图片的名称:全星、半星、空星 @param starNumber 对应星星类型的位置 */ -

    1.2K40

    vue项目简书(三)--打包部署

    通过浏览器运行,当然会不出意料的报错啦,不要急,下面要进行具体的文件修改,具体步骤如下: a、查看package.json文件的scripts命令 b,开webpack.dev.conf.js...当我第一眼看到项目真的是满心欢喜,哇哇哇,终于成功了,可是随之而来的就是一个大bug, 本来运用了elementUi的图标,评分星星都不见了,好吧,只能继续搜博客,解决问题....解决Vue项目打包后图标没有正常显示的问题 此时我们只需要找到build/util.js文件,在 'vue-style-loader' 之后加一行:publicPath: '../.....饿了么项目中的评分直接用来这个插件里的评分,当时用了之后一直没能修改它的大小, 困惑我许久,搜了大量博客,大多都是无法解决,本身无法改变.只能自适应, 好吧,我也是今天才知道了一种方法可以改变他的大小....disabled-void-color="#ccc" show-score text-color="#ff9900" class="ele"> 进入页面F12发现星星评分的类名就是

    3.4K40

    反编译完这些 app ,到底谁的安全等级更能打?

    码个蛋(codeegg) 第 1075 次推文 作者:星星y 链接:https://www.jianshu.com/p/052ce81ac953 前言 在Android开发中,apk的安全性是一个重要的关注点...同时针对这些应用用了一个粗糙的分数排名(非专业评分,大家看看就好)。 各参数等级与分数说明 反编译Level L1: 资源无混淆,使用原始ApkTool即可实现反编译,回编成apk。...apk安全评分 "-"表示当前最高等级,应用无法启动,默认最高等级。 ? 上面app的排名非权威,非正式,非正确,大家且不必认真对待。...小结 不同类型的应用关注的安全等级与安全策略可能会有所不同,大致可能会有以下一些情况: 请求无签名,可以修改参数,安全等级较低,新闻类应用 关键数据加密,比如腾讯漫画只加密类章节数据 主界面有数据,提示非官方应用

    80620

    写给设计师的人工智能指南:推荐系统

    如,Netflix收集的用户对电影评价的星星等级数据,京东、淘宝电商收集的用户好评数据。 显式反馈数据不一定总是找得到, 因此推荐系统可以从更丰富的隐式反馈信息中推测用户的偏好。...2.4 计算推荐 如果是基于Item的算法,则通过预先计算好items之间的相似度,把user 1评分过的items和某个要评分的item D的相似度加权计算预测的评分。...4 用Nodejs 动手实验 nodejs有这么一些开源的库可以使用: Likely.js recommender js-recommender recommender-node 4.1 Likely.js...Recommender.buildModel(inputMatrix, rowLabels, colLabels); Model对象现在包含一个与inputMatrix大小相同的矩阵,包含所有项目的等级...步骤3 推荐结果 预测Sue所有未评级的项目的等级 var recommendations = Model.recommendations('Sue'); /* 结果 [ [ "Blue",

    1.1K40

    WordPress星级评分插件KK Star Ratings评分插件教程

    WordPress星级评分插件KK Star Ratings评分插件教程   在使用Google搜索网站的时候,我们有看到有些搜索结果底下会显示星级评分,这就是利用星级评分来丰富网页摘要的Google...它具有广泛的定制可能性,即调整星星的数量、位置、设计和颜色。最大优势是能够限制来自一个IP地址的投票数量。   ...推荐:WordPress去掉分类目录网址category的四种方法 KK Star Ratings插件Appearance设置   Appearance外观设置主要设置投票前显示文本,投票后显示样式,星星的数量...Greeting text:投票前,对应星星后方的文案,自定义。 Legend:投票后,显示的星星样式,包含平均评分、投票数、星星总数、投票数。...Stars:控制星星的总数 Gap:控制星星之间的间距 Size:控制星星的尺寸大小 Default Position:投票显示在网页上的位置,包含左上方、顶部中心、右上、左下方、底部中心、右下角

    2.4K20

    【 开源计划 - Flutter组件 】 星星也可以如此闪耀 flutter_star

    【pub地址 】 【github地址】 dependencies: flutter_star: $lastVersion ---- 一、描述 目标: 使用canvas手工打造,一个完美的星星评分组件...>[CustomRating 星星评分组件]---- [2] 可指定最大值,也就是显示多少个星星 [3] 点击时会改变状态,进行评分,支持半星评分 [4] 支持评分回调 ---->[StarWidget...可定义星星的显示进度情况 0% ~ 100 % 无死角 [6]. 可定义星星的角数 [7]....---- 三 、CustomRating 评分组件 名称 类型 功能 备注 默认 max int 最大星星数 - 5 score double 分数 - 0 star Star 见 第四点 星星属性配置...星星的角数:num ? ---- 3. 星星的胖瘦:fat ? ---- 4. 星星的颜色:fillColor和emptyColor ?

    95930

    星星(每日一题)

    星星 - AcWing题库 天空中有一些星星,这些星星都在不同的位置,每个星星有个坐标。 本题采用数学上的平面直角坐标系,即 x 轴向右为正方向,y 轴向上为正方向。...如果一个星星的左下方(包含正左和正下)有 k 颗星星,就说这颗星星是 k 级的。 例如,上图中星星 5 是 3 级的(1,2,4在它左下),星星 2,4 是 1 级的。...例图中有 1 个 0 级,2 个 1 级,1 个 2 级,1 个 3 级的星星。 给定星星的位置,输出各级星星的数目。...换句话说,给定 N 个点,定义每个点的等级是在该点左下方(含正左、正下)的点的数目,试统计每个等级有多少个点。...具体开一个统计等级个数数组,每输入一个点,看一看它前面有多少个数,就是多少个等级,每有一个等级,计数数组++即可。

    8510

    第四个页面:制作电影资讯页面

    从效果图,可以看到图片、电影名称以及评分都是和电影资讯页面上的布局以及样式是重复的,所以我们还需要把这部分做成第二个template进行复用: ? 再来看一张效果图: ?...这是电影的详情页面,这里也用到了一个评分样式,这个样式也是重复的,所以我们还需要把这个样式做成第三个template进行复用。...我这里是先实现评分样式的template: stars-template.wxml内容如下: <view class='stars-container...---- <em>星星</em><em>评分</em>组件的实现 接着就是将<em>星星</em><em>评分</em>的组件完成,我的思路是使用将表示<em>星星</em>数据处理成0和1来表示两种<em>星星</em>图片,而这个0和1存储在一个数组里,到时候就根据数组里的元素来决定显示哪一个<em>星星</em>图片。...util.<em>js</em>内容如下: // 生成一个用来表示<em>星星</em>数量的数组 function convertToStarsArray(stars) { var num = stars.toString().substring

    1.5K10
    领券