纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方式完成评分和展示分数的功能,没有js,也就意味着没判断逻辑,代码出错的几率更少,也更便于维护,在此,把这个功能的实现的过程记录和分享一下,一起学习交流。
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步。
五角星的实现
1.图片或者字体图标
不极致追求性能的话,直接利用设计师给的png或者jpg啥的,或者直接转成base64.

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实现网站常用的五角星评分和分数展示交互效果的更多相关文章
- 纯 CSS 实现幻灯片播放
介绍: 今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...
- 纯css就能实现可点击切换的轮播图,feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
- css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)
1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...
- 纯css实现星级评分效果
效果 效果图如下,纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...
- 自定义常用input表单元素二:纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- 自定义常用input表单元素一:纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- 摘记 史上最强大的40多个纯CSS绘制的图形(一)
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- 史上最强大的40多个纯CSS绘制的图形[转]
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
随机推荐
- solr集群搭建(复制)
Solr集群的搭建以及使用(内涵zookeeper集群的搭建指南) 1 什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引 ...
- JSP/Servlet Web 学习笔记 DayFive
ServletConfig <只对当前Servlet有效> (1)在Web容器初始化Servlet实例时,都会为这个Servlet准备一个唯一的ServletConfig实例(俗称Serv ...
- asp.net连接SQL server,SQLLite,Oracle,Access数据库
asp.net中连接数据库有两种方式为appSettings和connectionStrings connectionStrings比较常用,所以只讲一下connectionStrings方式的连接 ...
- hexo 配置文件 实例
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/ ...
- POJ 3907 Build Your Home | 计算多边形面积
给个多边形 计算面积 输出要四舍五入 直接用向量叉乘就好 四舍五入可以+0.5向下取整 #include<cstdio> #include<algorithm> #includ ...
- 【CF Edu 28 A. Curriculum Vitae】
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- 基于RRT的机器人自主探索建图
一.方法讲解: 本项目分为三个部分:机器人周围一定范围内基于RRT的全局检测, 根据上一步检测的未知区域点执行sklearn.cluster.MeanShift聚类,获取聚类中心: 根据聚类中心计算各 ...
- MySQL数据库从windows迁移到linux
前几天搭建了lamp环境,想把之前写的小东西迁到linux上运行,涉及到把mysql数据库的文件迁移到linux上,直接用fileZilla传过去应该不行,我试了下,反正没成功.下面是我采用的方法: ...
- scrapy递归下载网站
# encoding: utf-8 import os import re import subprocess import sys import chardet import scrapy fro ...
- qfish/Bee-Xcode-Template
https://github.com/qfish/Bee-Xcode-Template Bee-Xcode-Template Xcode Template for BeeFramework. You ...