css 评分实际效果的星星示例

日期:2021-03-01 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

纳尼?甚么星星外衣?好,立即上图较为能说清晰:

细心看会发现规律性:能够依据百分比/分值动态性更改高亮度星星的个数。

分流程图:

 

这类实际效果,假如遇到1分1个星,沒有半星(或有还可以,立即加1个半星的类名)的状况,还能够根据加上好几个构造完成。

可是再再加这星星都要渐变色实际效果,我那时候差点儿找设计方案谈谈去(自然是求人家改为不渐变色啊)。

但是真的去的话,显得我们太不技术专业了并不是,漂亮的实际效果都完成不上,还叫甚么前端开发。

乖乖坐下看来设计方案稿。

这么立即看的话,将会沒有思路,但是能够换1种方法来思索:

先想一想下边这类实际效果怎完成的?

如何,是否看了这个,针对星星实际效果的完成也是有了思路了早已?!好,散伙。

哈哈,但是沒有也没事儿,能够先看来1下, 这类进度条的完成。随后再从他身上找思路 (这便是我开发设计时的思路了,很笨很“实干”):

构造以下:

很简易的构造,关键关键编码以下:

<div class="grade-progress-bg">
    <div class="grade-star-gradual">
        <span class="progress" style="width: 50%;"></span>
    </div>
</div>

对应实际效果,立即看来构造实体模型较为清楚:

 

如图,

在其中 div.grade-star-gradual 负责灰色的情况条,

span.progress负责五颜六色的进度条

Div.grade-progress-bg负责包裹2者,并和右边100%创意文案排序对齐用。

运用 span.progress的百分比宽度占有灰色条的占比来仿真模拟数据信息的百分比 。就显得分外简易了。

五颜六色星星的完成

运用这个思路,实际上五颜六色进度条和五颜六色星星进度条便是差星星 (这也是1句空话)

但重要思路点在于, 不必 把星星看作是进度条

也便是说星星评分和1般的进度条实际效果完成起来1样。唯1的差别是有没有星星。

那如何把一般进度条再加星星呢?我的设计方案技术专业還是给了我1丝设计灵感:

要是在五颜六色进度条上边遮盖1个镂空的星星图案设计,看到的不就全是星星了吗?!

例如这样的:

随后具体这个进度条长这样:

披上绮丽的外衣后长这样:

是否觉得又赚了个大划算!

编码设计方案上,還是和以前的进度条1样,情况色原始为灰色,星星盖在上边便是5个灰色的小编星

 

随后当了解据值得情况下, 更改五颜六色条 span.progress的宽度为百分比便可完成视觉效果上星星个数的转变

 

构造上,也和进度条1致,可是以便这个镂空星星的 “外衣”,我加了1个空构造做span的弟弟,还可以用1个伪类随便充分发挥。

<div class="grade-progress-box">
    <div class="grade-star-bg">
      <div class="grade-star-gradual">
        <span class="progress" style="width: 100%;"></span>
        <div class="grade-star-img bgsize"></div>//镂空星星图
      </div>
   </div>
    <div class="grade-number grade-number1">5分</div>
</div>

但要确保这个 “外衣要衣着得体”,即剪裁恰当,不必露怯为妙。

镂空星星周边的色调要和进度条周边的融为1体,我这里全是白色,较为好混。

最终 展现用的百分比 和分输,相互配合上 vue的英语的语法,很简易的便可以关联展现。

至于 从左向右的填充动态性实际效果 ,只必须简易的应用css 的transition,监视width的更改便可。

一般进度条

.grade-progress-box

  .grade-progress-bg

    .grade-star-gradual #[span.progress(:style="{width: (Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(0) + '%'}")]

  .grade-number {{(Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(2)}}%

款式

grade-progress-box:after {

    content: "";

    display: block;

    clear: both;

    visibility: hidden;

    overflow: hidden;

  } 

  .grade-progress-bg {

    display: table-cell;

    vertical-align: middle;

    width: 4.3rem;

    height: .14rem;

    overflow: hidden;

  }

  .grade-star-gradual {

    height: 0.16rem;

    -webkit-border-radius: .15rem;

    border-radius: .15rem;

    overflow: hidden;

    background: #e5e5e5;

  }

  .grade-star-gradual span.progress {

    width: 0;

    height: 100%;

    display: block;

    -webkit-border-radius: .15rem;

    border-radius: .15rem;

    -webkit-transition: width 1s ease-out;

    -o-transition: width 1s ease-out;

    transition: width 1s ease-out;

    background: -webkit-gradient(linear, left top, right top, from(#f23f5c), to(#fea94e));

    background: -o-linear-gradient(left, #f23f5c, #fea94e 100%);

    background: linear-gradient(to right, #f23f5c, #fea94e 100%);

    background: -webkit-linear-gradient(left, #f23f5c, #fea94e 100%);

  }

星星进度条

.grade-progress-box

  .grade-star-bg

    .grade-star-gradual #[span.progress(:style="{width: (DBData.Sat/5*100).toFixed(0) + '%'}")]

      .grade-star-img

  .grade-number.grade-number1 {{DBData.Sat}}分

款式

.grade-star-bg {

    position: relative;

    display: table-cell;

    width: 4.46rem;

    height: .5rem;

    overflow: hidden;

    margin-right: .22rem;

    vertical-align: middle;

  }

  .grade-star-gradual {

    height: 0.16rem;

    -webkit-border-radius: .15rem;

    border-radius: .15rem;

    overflow: hidden;

    background: #e5e5e5;

  }

  .grade-star-bg .grade-star-gradual {

    height: 100%;

  }

  .grade-star-img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: url(data:image/png;base64,) no-repeat;

    -webkit-background-size: 100% 100% !important;

    background-size: 100% 100% !important;

  }

好了,又搞定了1个。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。