纯css实现评分
用到的知识点:
E:checked:单选或复选框被选中
E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点
E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容
css代码:
.star-box{display:table;}
.star-box label{float:right;color:#999;}
.star-box label::after{content:'★';font-size:28px;padding:5px;display:inline-block;line-height:1;}
.star-box input:checked~label,
.star-box label:hover~label,
.star-box label:hover{color:red;}
html代码:
<div class="star-box">
<input type="radio" name="star" id="star5" hidden/>
<label for="star5"></label> <input type="radio" name="star" id="star4" hidden/>
<label for="star4"></label> <input type="radio" name="star" id="star3" hidden/>
<label for="star3"></label> <input type="radio" name="star" id="star2" hidden/>
<label for="star2"></label> <input type="radio" name="star" id="star1" hidden/>
<label for="star1"></label>
</div>
效果图:
纯css实现评分的更多相关文章
- 纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...
- 纯css实现星级评分效果
效果 效果图如下,纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
随机推荐
- 集训队日常训练20181201 C 1003 : 种类数
时间限制(普通/Java):2000MS/6000MS 内存限制:65536KByte总提交: 8 测试通过:5 描述 一共有 n个数,第 i 个数是 xi ,其中xi ...
- python2和python3的range(100)的区别
python2返回列表,python3返回迭代器,节约内存
- 纯css实现翻书效果
前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...
- win2008 401 - 未授权: 由于凭据无效,访问被拒绝。解决方法
iiis中一个小配置的问题,“身份验证”里面“启用匿名身份验证”,编辑匿名身份验证凭据,选中下面的“应用程序池标识” 就可以了
- python 装饰器问题及解决方式
#统计函数运行时间 import time #装饰器 def timmer(func): def wrapper(*args,**kwargs): start_time=time.time() fun ...
- hbase的api操作之scan
扫描器缓存---------------- 面向行级别的. @Test public void getScanCache() throws IOException { Configu ...
- C++ for循环语句
#include "pch.h" #include<iostream> using namespace std; int main() { int i = 1, sum ...
- 【Monkey】Monkey稳定性测试常用命令
Monkey稳定性测试常用命令: 1.adb shell monkey n 2.adb shell monkey -p com.android.calculator2 1000 3.adb shel ...
- day21_python_1124
01 昨日内容回顾 类与类之间的关系: 依赖关系:将一个类的对象或者类名传到另一个类中. 关联关系 组合关系:将一个类的对象封装到另一个类的对象属性中. 聚合关系 boy gril school te ...
- 一位资深Java架构师的晋级心得
架构师是什么? 是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物.一个架构师得需要足够的想像力,能把各种目标需求进行不同维度的扩展,为目标客户提供更为全面的需求清 ...