纯CSS完成网站经常使用的五角星评分和分数展现交互结果

2019年8月31日 179次阅读 来源: 微醺岁月

近来做的一个项目涉及到评分和展现分数的模块，UI设计师也给了几个切好的图片，完成五角星评分体式格局许多，实质爱折腾的精力和对机能寻求以及便于保护的斟酌，汇集和尝试了许多体式格局，终究采用了纯css驱动的完成体式格局完成评分和展现分数的功用，没有js,也就意味着没推断逻辑，代码失足的概率更少，也更便于保护，在此，把这个功用的完成的历程纪录和分享一下，一同进修交换。

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜好的能够关注最新动态，人人一同多交换进修，共同进步。

五角星的完成

1.图片或许字体图标

不极致寻求机能的话,直接应用设计师给的png或许jpg啥的,或许直接转成base64.

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

2:应用Fontawesome 图标库，实在只是一种矢量字体。

HTML:

<div class="icon"></div>

CSS:

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.icon:before {
    content: '\f005';
    font-family: FontAwesome;
}

在线预览地点

3.应用css3描写拼集一个五角星。

基本道理：应用transparent的通明不可见和transform转换拼接一个正五角星。

HTML:

<div class="star-five"></div>

CSS:

.star-five{
width: 0;
height: 0;
color: red;
margin: 50px 0;
position: relative;
display: block;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
transform:rotate(35deg);
}

.star-five:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
position: absolute;
top: -45px;
left: -65px;
color: white;
display: block;
content: "";
transform:rotate(-35deg);
}
.star-five:after{
width: 0;
height: 0;
display: block;
position: absolute;
color: red;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
content: "";
transform:rotate(-70deg);
}

在线预览地点

不发起运用这类，由于挑选以后转变色彩状况比较贫苦，改起来很不轻易，不如前面几种轻易好保护。

4.直接运用五角星标记

★?

简朴粗犷，轻易掌握，品相谐和，下面完成体式格局以★为准。




关于CSS的一些挑选器

不必js来掌握评分，固然不能错过壮大的css挑选器，这里就先引见一下关于完成这个功用要用到的一些css挑选器。

在引见css壮大的挑选器之前，先进步一下“CSS radio/checkbox单复选框元素显隐手艺”，又称“checkbox hack手艺”。

1.checkbox hack手艺

我们运用CSS一些特别的挑选器，然后合营单选框以及复选框自带的一些特征，能够完成元素的显现隐蔽结果。然后经由过程一
些简朴的扩大，我们能够不运用任何JavaScript代码完成相似：自定义的单复选框，“更多”睁开与收起结果，选项卡切换
结果，或是多级下拉列表结果等等。

置信许多前端开发人员都邑碰到boss让修正checkbox和radio款式，毕竟自带的款式太丑了。厥后我们发明修正自带款式
并非那末轻易，末了直接使出杀手锏——点击以后替代图片。
本日教人人一种要领，不必替代图片，随便修正款式。照样先看结果图：

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

`先讲一下道理：两个症结东东，一是伪类挑选器:checked，示意对应控件元素（单选框或是复选框）选中时的款式；二就是加号+ 相邻兄弟挑选器，这个标记示意挑选背面的兄弟节点。因而，二者合营，就能够轻松自如掌握背面元素的显现或许隐蔽，或是其他款式了。
而怎样让单复选框选中和不选中了，那就是label标签了哈，for属性锚定对应的单选框或是复选框，然后点击这里的label标签元素的时刻，对应的单复选框就会选中或是作废选中。然后，就有上面的结果啦！`

这里只给一个radio单选框的代码,仅供参考:

HTML:

<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

SCSS:

.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}

美化radio单选框在线预览地点：点击我呀
美化checkbox复选框在线预览地点：点击我呀

更多关于这方面的引见和例子能够参看张鑫旭大神的这篇文章：CSS radio/checkbox单复选框元素显隐手艺

2.CSS一些挑选器

HTML:

<div class="wrapper">
  <p class="test1">1</p>
  <p class="test2">2</p>
  <p class="test3">3</p>
  <p class="test4">4</p>
  <p class="test5">5</p>
</div>

CSS:

p{
  width:20px;
  line-height:20px;
  border:1px solid gray;
  text-align:center;
  font-weight: 700;
}
E + F: 相邻兄弟挑选器 挑选婚配F的元素，且该元素为所婚配E元素背面相邻的位置。
.test1+p{
  background-color:green;
}

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

E > F:子包括挑选器 挑选婚配F的元素，且该元素为所婚配E元素的子元素。
.wrapper>p{
  background-color:green;
}

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

E ~ F: 挑选背面的兄弟节点们
.test2~p{
  background-color:green;
}

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

E::after,E::before: 伪元素挑选器 在婚配E的元素背面(前面)插进去内容
.test2::before{
  background-color:green;
  content:"前"
}
.test2::after{
  background-color:green;
  content:"后"
}

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

:not(E) 挑选非 <E> 元素的每一个元素。
.wrapper>:not(.test2){
  background-color:green;
}

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

:checked input:checked 挑选每一个被选中的input元素。

HTML:

<input type="radio" name="" id="" />

<span>3333</span>

CSS:

input:checked+span{
  border:10px solid red;
}

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》



这里只提一下本文要用到的CSS挑选器，更多关于CSS3壮大的挑选器请移步这里：周全整顿 CSS3 挑选器的用法




完成评分模块

HTML:

 <div class="rating">
        <input type="radio" id="star5" name="rating" value="5" hidden/>
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4" hidden/>
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3" hidden/>
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2" hidden/>
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1" hidden/>
        <label for="star1"></label>
    </div>

关于input标签的隐蔽,我这里只需用hidden属性完成隐蔽,固然另有许多完成体式格局,只需input不占有文档的位置然则看不见就OK,我们须要隐蔽单选框，且为可用性隐蔽。这里另有几种体式格局仅供人人参考:

1. display: none;

 .rating >input {
        display: none;
    }

2. css3的clip

 .rating >input {
        position: absolute;
        clip: rect(0 0 0 0);
    }

3.opcity

.rating >input {
        position: absolute;
        opacity: 0;
    }

CSS:

    .rating {
        font-size: 0;
        display: table;
    }

    .rating > label {
        color: #ddd;
        float: right;
    }

    .rating > label:before {
        padding: 5px;
        font-size: 24px;
        line-height: 1em;
        display: inline-block;
        content: "★";
    }

    .rating > input:checked ~ label,
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: #FFD700;
    }

    .rating > input:checked ~ label:hover,
    .rating > label:hover ~ input:checked ~ label,
    .rating > input:checked ~ label:hover ~ label {
        opacity: 0.5;
    }

在线预览地点

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》




展现评分模块

用户评完分以后，会看到展现的分数，假定五个星星，满分10分。

展现评分就比较简朴，放两个如出一辙的html，五角星色彩差别，灰色的放在下面，评分的亮色放在上面，然后根据百分比显现分数。

HTML:

 <div class="star-rating">
        <div class="star-rating-top" style="width:50%">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="star-rating-bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

CSS:

.star-rating {
        unicode-bidi: bidi-override;
        color: #ddd;
        font-size: 0;
        height: 25px;
        margin: 0 auto;
        position: relative;
        display: table;
        padding: 0;
        text-shadow: 0px 1px 0 #a2a2a2;
    }

    .star-rating span {
        padding: 5px;
        font-size: 20px;
    }
    
    .star-rating span:after {
        content: "★";
    }

    .star-rating-top {
        color: #FFD700;
        padding: 0;
        position: absolute;
        z-index: 1;
        display: block;
        top: 0;
        left: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .star-rating-bottom {
        padding: 0;
        display: block;
        z-index: 0;
    }

当接口返回的分数是5分的时刻，恰好占有一半的星星，2星半，只需计算出百分比就行，只用管数据，用上vue.js数据驱动的特点来动态展现款式这个几乎不要太轻易。

《纯CSS完成网站经常使用的五角星评分和分数展现交互结果》

在线预览地点:

本文要领优点在于，纯CSS驱动，种种切换基础不须要JS，省了不少JS，关于相似这类需求人人也能够闻一知十，这里只提供一些思绪，没有细说；同时图片背景比较小或许能够直接不运用图片，比起运用图片节约不少资本，和进步些许机能。然则，进修以及明白本钱稍高，能够并不适用于一切偕行，因而，此文合适喜好“折腾”的童鞋。

    原文作者：微醺岁月
    原文地址: https://segmentfault.com/a/1190000008899275
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞