css实现简易五角星星级

首先在html中写上如下代码：

                               <div class="col-md-5"><b>检测星级：</b><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></div>

其中star-rating-top的width表示的是五角星当前所覆盖的星级：

如：width:10%表示半颗星；

width:20%表示一颗星 ;

>>>

width:100%表示五颗星。

然后css写上如下代码：

    {# 五角星 #}<style>.star-rating {unicode-bidi: bidi-override;color: #ddd;font-size: 0;height: 25px;margin: 0 auto;padding: 0;position: absolute;top: -9px;left: 28%;}.star-rating span {padding: 2px;font-size: 25px;}.star-rating span:after {content: "★";}.star-rating-top {color: #F6A527;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;}</style>

如果需要更改其星级，可直接用js更改star-rating-top的width

js示例：

var star = document.getElementsByClassName('star-rating-top')[0]
star.style.width = 80 + '%'

jq示例：

$('.star-rating-top').css('width','100%')

最后附上效果图：

css实现简易五角星星级相关推荐

使用 HTML CSS 和 JavaScript 创建星级评分系统
各位读者好,今天在本博客中,您将学习如何使用 HTML CSS 和 JavaScript 创建星级评分系统 (Widget).早些时候,我还分享了一篇关于Star Rating Widget 的博客, ...
打分五角星html制作,css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）...
css简单实现五角星评分.点赞收藏.展示评分(半颗星.1/3颗星) 1. 前言之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后 ...
JAVA做一个五星评论打分字体,css简单实现五角星评分、点赞收藏、展现评分（半颗星、1/3颗星）...
1.前言javascript 以前作的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了不少次,每次须要再写的时候,就会翻出以前写过的代码,而后copy过来.总以为这样的话没有进步,没有把知识放进 ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
使用Html+Css实现简易导航栏(导航栏遇到鼠标切换背景颜色)
Ⅰ.问题描述: 使用html+css实现简易导航栏: **要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色: Ⅱ实现过程如下: 1.运行软件VScode,亲测可实现: ...
用css实现简易报警灯
主题用css来实现一个简易的报警灯效果实现效果实现思路实现的核心是一个灯罩和一个灯芯.灯罩主要是使用了border-radius圆角边框,灯芯主要是radial-gradient径向渐变.再使 ...
进阶篇之纯css 字体实现五角星（半颗星）评分
1.前言之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体 css实现! ...
如何用css绘制一个五角星并添加旋转动画
关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬 ...
html+css制作简易版Baymax
</pre>大白的简易版图片如下,我用html+css来制作简易版的大白.<img src="https://img-blog.csdn.net/2016012418583 ...

css实现简易五角星星级

css实现简易五角星星级相关推荐

最新文章

热门文章