资讯专栏INFORMATION COLUMN

纯CSS的星级评价效果

Lin_R / 1554人阅读

摘要:代码实现一星两星三星四星五星去掉标签默认样式初始化样式鼠标悬浮精益求精上面我们的星星评分效果已初见成效,但是暴露了一个问题,就是我们的评价机制缺少记忆功能。这里有点不一样的是每个星星对应一个单选框和一个标签,的层级要高于单选框。

前言

这种星星评价效果,相信大家这个并不陌生,经常会遇到这个。现在如果要我们自己实现一个,很多人第一反应可能用JS+CSS去实现它。这种方式并没有什么不好的地方,只是我们在复用的时候不是很方便,需要带上JS和CSS的两块代码。为了复用更简单,所以我们介绍一种纯CSS的方式。

小试牛刀 素材

原理

这里我们分为两层:
第一层:div.star_evaluate 设置图片背景icon-star-default.png,沿X轴平铺,超出部分隐藏,作为定位父级。
第二层:a标签作为第二层,这里我们需要设置其定位属性,初始化设定好每个a标签的位置,以及其背景图片。这边需要注意的是一定要给a便签加上层级。

鼠标移动对应的星星时,将其left属性设置为0,然后设置其宽度,这个宽度由其对应的星级决定,最后别忘了设置其层级。

关于层级的设定,我们一定要保证div.star_evaluate 代码实现

HTML

CSS

/*去掉标签默认样式*/
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*初始化样式*/
.star_evaluate {
    position: relative;
    width: 100px;
    height: 20px;
    background: url("icon-star-default.png") repeat-x;
    background-size: 20px 20px;
    overflow: hidden;
}

.star {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 2;
}

.star_1 {
    left: 0;
}

.star_2 {
    left: 20px;
}

.star_3 {
    left: 40px;
}

.star_4 {
    left: 60px;
}

.star_5 {
    left: 80px;
}

/*鼠标悬浮*/
.star:hover {
    cursor: pointer;
    background: url("icon-star-active.png") repeat-x;
    background-size: 20px 20px;
    left: 0;
    z-index: 1;
}

.star_1:hover {
    width: 20px;
}

.star_2:hover {
    width: 40px;
}

.star_3:hover {
    width: 60px;
}

.star_4:hover {
    width: 80px;
}

.star_5:hover {
    width: 100px;
}
精益求精

上面我们的星星评分效果已初见成效,但是暴露了一个问题,就是我们的评价机制缺少记忆功能。接下来我们来优化一下。

素材

同上。

实现原理

这边我们实现星星评分记忆的功能主要依赖input[type=radio]单选框,我们的星星评分主要分为三个状态。
初始化状态:在初始化状态下,我们需要跟上面一样初始化星星的位置。这里有点不一样的是每个星星对应一个单选框和一个label标签,label的层级要高于单选框。另外我们通过label的for的属性来实现和单选框的联系。
悬浮状态:在悬浮状态下,我们要根据悬浮所对应的星星来设置label标签的宽度,left属性设置为0。此时我们要保证该悬浮状态下的label标签的层级低于其他label标签。
选中状态:在选中状态下,我们跟悬浮状态一样设置label标签的宽度。

代码实现

HTML

CSS3

        /*去掉标签默认样式*/
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        input {
            margin: 0;
        }

        /*初始化样式*/
        .star_evaluate {
            position: relative;
            width: 100px;
            height: 20px;
            background: url("icon-star-default.png") repeat-x;
            background-size: 20px 20px;
            overflow: hidden;
        }

        .star,.score{
            display: block;
            height: 20px;
            width: 20px;
            position: absolute;
        }
        .star{
            z-index: 2;
        }
        .score{
            opacity: 0;
        }

        .star_1, .score_1 {
            left: 0;
        }

        .star_2, .score_2 {
            left: 20px;
        }

        .star_3, .score_3 {
            left: 40px;
        }

        .star_4, .score_4 {
            left: 60px;
        }

        .star_5, .score_5 {
            left: 80px;
        }

        /*鼠标悬浮*/
        .star:hover {
            cursor: pointer;
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
            z-index: 1;
        }

        .star_1:hover {
            width: 20px;
        }

        .star_2:hover {
            width: 40px;
        }

        .star_3:hover {
            width: 60px;
        }

        .star_4:hover {
            width: 80px;
        }

        .star_5:hover {
            width: 100px;
        }

        /*选中之后*/
        .score:checked + .star {
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
        }

        .score_1:checked + .star_1 {
            width: 20px;
        }

        .score_2:checked + .star_2 {
            width: 40px;
        }

        .score_3:checked + .star_3 {
            width: 60px;
        }

        .score_4:checked + .star_4 {
            width: 80px;
        }

        .score_5:checked + .star_5 {
            width: 100px;
        }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50867.html

相关文章

  • CSS星级评价效果

    摘要:代码实现一星两星三星四星五星去掉标签默认样式初始化样式鼠标悬浮精益求精上面我们的星星评分效果已初见成效,但是暴露了一个问题,就是我们的评价机制缺少记忆功能。这里有点不一样的是每个星星对应一个单选框和一个标签,的层级要高于单选框。 前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 这种星星评价效果,相信大家这个并不陌生...

    davidac 评论0 收藏0
  • CSS星级评价效果

    摘要:代码实现一星两星三星四星五星去掉标签默认样式初始化样式鼠标悬浮精益求精上面我们的星星评分效果已初见成效,但是暴露了一个问题,就是我们的评价机制缺少记忆功能。这里有点不一样的是每个星星对应一个单选框和一个标签,的层级要高于单选框。 前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 这种星星评价效果,相信大家这个并不陌生...

    lijy91 评论0 收藏0
  • CSSGAMES:CSS实现五星评价效果

    上图:showImg(https://segmentfault.com/img/bVLLXv?w=267&h=76); 上代码: .container{ width: 150px; height: 30px; position: relative; } .container ul{ ma...

    468122151 评论0 收藏0
  • CSSGAMES:CSS实现五星评价效果

    上图:showImg(https://segmentfault.com/img/bVLLXv?w=267&h=76); 上代码: .container{ width: 150px; height: 30px; position: relative; } .container ul{ ma...

    raledong 评论0 收藏0
  • Vue实战—评价组件设计与实现(6)

    摘要:本篇文章我们进一步深入项目设计评价组件。使得组件更加便于维护。路径配置内自动补全设置通过重命名设置对组件导入模块时进行了重命名。全部有图点评使用引入的组件组件就是上图标记的分隔线。 在上篇文章我们将项目头部模块进行了编写与数据渲染。 本篇文章我们进一步深入项目设计评价组件。 showImg(https://segmentfault.com/img/bVbt6IP?w=374&h=417...

    cocopeak 评论0 收藏0

发表评论

0条评论

Lin_R

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<