纯CSS绘制星星评分特效

只需要用两个图标即可实现：

实现效果如下：

以下为代码：

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>星级评分展示CSS样式技巧</title>
<styletype="text/css">
.vote-star{
display:inline-block;/*内联元素转换成块元素，并不换行*/
margin-right:6px;
width:75px;/*5个星星的宽度*/
height:15px;/*1个星星的高度*/
overflow:hidden;
vertical-align:middle;
background:url(../content/images/group/starsblack.png) repeat-x;}
.vote-star i{
display:inline-block;/*内联元素转换成块元素，并不换行*/
height:15px;/*1个星星的高度*/
background:url(../content/images/group/starsyellow.png) repeat-x 00;}
.vote-number{
vertical-align:middle;
font-family:微软雅黑,Verdana,Geneva, sans-serif;
font-size:12px;}
</style>
</head>
<body>
<divclass="star">
<spanclass="vote-star"><istyle="width:97%"></i></span><spanclass="vote-number">9.7分</span>
</div>
</body>
</html>

在项目中，可以将span标签换成div都可以

来自为知笔记(Wiz)

附件列表

时间： 2024-08-29 02:45:34

纯CSS绘制星星评分特效的相关文章

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯 CSS 绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square (正方形) #square { width: 100px; height: 100px; background: red; } Rectangle (矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle (圆形

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,

纯CSS绘制三角形

使用CSS绘制三角形正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

纯CSS绘制三角形（各种角度）

我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天给大家带来 CSS 三角形绘制方法 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100

32.纯 CSS 创作六边形按钮特效

原文地址:https://segmentfault.com/a/1190000015020964 感想:简简单单的动画特效,位置,动画. HTML代码: <nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> <nav> <

21纯 CSS 创作文本滑动特效的 UI 界面

原文地址:https://segmentfault.com/a/1190000014842868 简化版地址:https://scrimba.com/c/cgaZLh6 感想:笨蛋,想不出自己的东西... HTML代码: <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> &l

28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形

原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码:  <div class="penrose"> <span></span> <span></span> <span></span> </div> CSS代码: html, body { margin: 0

38.纯 CSS 创作阶梯文字特效

原文地址:https://segmentfault.com/a/1190000015107942 HTML code: <div class="container"> <p> <span>stay</span> <span>hungry</span> </p> <p> <span>hungry</span> <span>stay</span>

43.纯 CSS 绘制一个充满动感的 Vue logo

原文地址:https://segmentfault.com/a/1190000015177284 感想: 又有点回到boder的三角形 HTML code: <div class="vue"> <span class="outer"></span> <span class="middle"></span> <span class="inner"></