AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用纯css实现打星星效果（三）

2022-04-24 600
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 用纯css实现打星星效果（三）

题外话


查看原文可以有更好的排版效果哦


从后面开始，文章中的代码演示会用Codepen来替代。


这样做的好处有

  1. 方便自己对所写过的demo进行统一的管理
  2. 方便文章中的展示，前面都是直接在文章中嵌入html代码和css样式，这样就会造成css样式名的冲突，前面的解决方式就是不断的重新命名 star、star01、star02等等这些
  3. 方便转载到其他平台。由于markdown语法中的html内嵌并不是一个标准语法，因而把内嵌大量html的markdown复制到其他平台，比如segmentfault，就会出现乱码的问题


Start


前面已经介绍了两种纯css实现打星星效果的方式，接下来继续扩展更多的功能，看着更接近平时说见到的效果，我们仍然会坚持用css来实现


如何实现鼠标滑动时有文字提示？


我们这里说的文字变化不是说那个title效果，我们在淘宝上会见到当我们滑动鼠标在不同的星星上时，右边会有一个文字，分别提示类似于 满意，非常满意，一般， 这样的提示效果，现在我们就来实现这样的效果。


先看效果


https://codepen.io/xboxyan/pe...点击预览


结构


html结构还是引用上一篇的:

<style>

<style>
.star{
   display: inline-block;
   font-size: 0;
}
.star-item{
   display: inline-block;
   width: 20px;
   height:20px;
   cursor: pointer;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAYFBMVEUAAAD92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92UmCTPEWAAAAH3RSTlMA9iwe++hAgPLJo13i3Td8JO3Sk4xtYkYUC76cVBIjGgBFCwAAAMtJREFUKM+1kUkOhCAQRUEFBHGep67737JRlEFNJ73wbyAv9WtRD/1O3z/AqrqzDqC7spEAkPECGagwlwRJE28wbpJAk5xjcIJ5rmBBwAsp9nLpsvJYkMWWxRk6QrHZSJFJesIU2UQnjCwLwSQ0kG4zQmzzdmcCuA5VocaQGNiyQX8G1qK/8q6jNH1wtCx3RxwhfnUkM3Vs6ToSdNUDK52NI6JL+4R1JD/HYaXriOsP9xxN+p08R0JV1ZlnzxELRBSJIPccSe1IvufoCxGAFoLwSVOBAAAAAElFTkSuQmCC') center top no-repeat;
}
input[type="radio"]{
   position: absolute;
   clip: rect(0,0,0,0)
}
input[type="radio"]:checked~.star-item{
    background-position: center bottom;
}
.star:hover label.star-item{
   background-position: center top;
}
label.star-item:hover~.star-item{
   background-position: center bottom;
}
</style>
<div class="star">
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item05" title="完美"></label>
    <input type="radio" name="item" id="item05" />
</div>


一点思路


如果想实现星星最后面有一行提示文字，按照一般的思路，可能就是在最后一颗星星后面直接添加一个标签span，然后通过js监听mouseover和mouseout事件来修改span的innerHTML，只要会点js的通应该能实现，那么通过css如何实现呢？

显然是不能直接修改innerhtml的，那么该如何修改呢？

我们可以直接用:after伪元素来生成内容，比如


span:after{content:'我是生成的内容'}

那么我们就可以通过伪元素的content来用css生成内容


修改一下结构

<div class="star">
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item05" title="完美"></label>
    <input type="radio" name="item" id="item05" />
    <span class="star-tip"></span><!--添加一个标签来存放文字提示-->
</div>


现在我们再来添加一点css来生成内容

.star-item[title="垃圾"]:hover~.star-tip:after{
   contnet:"垃圾"
}


这样当鼠标滑过第一个星星的时候，后面就会生成垃圾的提示。

全部写完整就是

.star-item[title="垃圾"]:hover~.star-tip:after{
   contnet:"垃圾"
}
.star-item[title="很差"]:hover~.star-tip:after{
   contnet:"很差"
}
.star-item[title="一般"]:hover~.star-tip:after{
   contnet:"一般"
}
.star-item[title="很好"]:hover~.star-tip:after{
   contnet:"很好"
}
.star-item[title="完美"]:hover~.star-tip:after{
   contnet:"完美"
}


这样应该可以实现鼠标移动到哪就提示相应的文字，但是，不觉得这样写法有点太不智能了吗，完全就是复制粘贴，如果有Less或者Sass可以简单写一个循环就可以自动生成这些了，但是本质还是一样的，写了这么多重复的代码，也没法合并，难道css就没办法了吗？

其实还是有的，我们要用到content的attr功能，就是取到相应属性的值，有点变量的意思，比如

<style>
  span:after{content:attr(a)}
</style>
<span a="我是A"></span>


这样span就会根据自身的a属性来生成内容了

我们现在把之前添加的<span class="star-tip"></span>去掉，不可能再根据他那生成了，我们现在需要根据label自身来生成内容，添加如下css

.star{
   position:relative;/*添加相对定位，因为生成的内容要相对于最外层了*/
}
.star-item:after{/*加点样式*/
   position:absolute;
   width:100px;
   font-size:14px;
   height:20px;
   line-height:20px;
   right:0;
   margin-right:-105px;
   color:#666
}
.star-item:hover:after{
   content:attr(title)
}


这样还不够，我们还需要根据:checked记住当前选项

input[type="radio"]:checked+.star-item:after{/*选择input相邻的下一个label*/
   content:attr(title)
}


这里有个问题，label和input的顺序反过来了，这里我们对调一下，所以之前的代码需要修复一下

<style>
.star{
   display: inline-block;
   font-size: 0;
}
.star-item{
   display: inline-block;
   width: 20px;
   height:20px;
   cursor: pointer;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAYFBMVEUAAAD92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92UmCTPEWAAAAH3RSTlMA9iwe++hAgPLJo13i3Td8JO3Sk4xtYkYUC76cVBIjGgBFCwAAAMtJREFUKM+1kUkOhCAQRUEFBHGep67737JRlEFNJ73wbyAv9WtRD/1O3z/AqrqzDqC7spEAkPECGagwlwRJE28wbpJAk5xjcIJ5rmBBwAsp9nLpsvJYkMWWxRk6QrHZSJFJesIU2UQnjCwLwSQ0kG4zQmzzdmcCuA5VocaQGNiyQX8G1qK/8q6jNH1wtCx3RxwhfnUkM3Vs6ToSdNUDK52NI6JL+4R1JD/HYaXriOsP9xxN+p08R0JV1ZlnzxELRBSJIPccSe1IvufoCxGAFoLwSVOBAAAAAElFTkSuQmCC') center top no-repeat;
}
input[type="radio"]{
   position: absolute;
   clip: rect(0,0,0,0)
}
input[type="radio"]:checked+.star-item~.star-item{/**这里需要排除掉当前选项，所以选择的是下一个（+）节点的后面的（~）节点**/
    background-position: center bottom;
}
.star:hover label.star-item{
   background-position: center top!important;/**由于前面的选择器层级较高，这里简单用!important来处理**/
}
label.star-item:hover~.star-item{
   background-position: center bottom!important;
}
</style>
<div class="star">
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item05" />
    <label class="star-item" for="item05" title="完美"></label>
</div>


这样也能达到同样的效果，选中效果效果也出来了，但是选中和滑动会有重叠效果，选择需要在滑动时去掉选中效果，同样是先清空再添加的思路

.star:hover .star-item:after{
  content:''!important
}
input[type="radio"]:checked+.star-item:after{
   content:attr(title)
}
.star:hover .star-item:hover:after{
   content:attr(title)!important
}


注意里面的层级覆盖关系，可以多试一下。

下面奉献完整代码

<style>
.star{
   display: inline-block;
   font-size: 0;
   position:relative;
}
.star-item{
   display: inline-block;
   width: 20px;
   height:20px;
   cursor: pointer;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAYFBMVEUAAAD92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92UmCTPEWAAAAH3RSTlMA9iwe++hAgPLJo13i3Td8JO3Sk4xtYkYUC76cVBIjGgBFCwAAAMtJREFUKM+1kUkOhCAQRUEFBHGep67737JRlEFNJ73wbyAv9WtRD/1O3z/AqrqzDqC7spEAkPECGagwlwRJE28wbpJAk5xjcIJ5rmBBwAsp9nLpsvJYkMWWxRk6QrHZSJFJesIU2UQnjCwLwSQ0kG4zQmzzdmcCuA5VocaQGNiyQX8G1qK/8q6jNH1wtCx3RxwhfnUkM3Vs6ToSdNUDK52NI6JL+4R1JD/HYaXriOsP9xxN+p08R0JV1ZlnzxELRBSJIPccSe1IvufoCxGAFoLwSVOBAAAAAElFTkSuQmCC') center top no-repeat;
}
input[type="radio"]{
   position: absolute;
   clip: rect(0,0,0,0)
}
input[type="radio"]:checked+.star-item~.star-item{/**这里需要排除掉当前选项，所以选择的是下一个（+）节点的后面的（~）节点**/
    background-position: center bottom;
}
.star:hover label.star-item{
   background-position: center top!important;/**由于前面的选择器层级较高，这里简单用!important来处理**/
}
label.star-item:hover~.star-item{
   background-position: center bottom!important;
}
.star-item:after{/*加点样式*/
   position:absolute;
   width:100px;
   font-size:14px;
   height:20px;
   line-height:20px;
   right:0;
   margin-right:-105px;
   color:#666
}
.star:hover .star-item:after{
  content:''!important
}
input[type="radio"]:checked+.star-item:after{
   content:attr(title)
}
.star:hover .star-item:hover:after{
   content:attr(title)!important
}
</style>
<div class="star">
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item05" />
    <label class="star-item" for="item05" title="完美"></label>
</div>


codepen效果


https://codepen.io/xboxyan/pe...点击预览


小节


通过一番努力，这个打星星效果基本上满足一般的业务需求，没有用到任何js代码，完美兼容ie8浏览器，应该能体现出css的强大之处吧，虽然css现在还比较蹩脚，但是用css的思路来实现一个逻辑还挺有意思的，可以从更多的角度去解决一个问题，有时反而会更简单

文章标签：
JavaScript
前端开发
关键词：
CSS星星
CSS实现
游客y3drc72yycbqm
目录
相关文章
MiyueFE
|
前端开发 JavaScript 开发者
利用 SplitingJS 配合 CSS 实现文字&quot;蠕动&quot;效果
利用 SplitingJS 配合 CSS 实现文字&quot;蠕动&quot;效果
MiyueFE
377 2
ThundersArk
|
前端开发 JavaScript
HTML+CSS+JAVASCRIPT实现——情人节表白情书
本文主要介绍如何使用HTML三件套来实现制作一封情人节表白情书,富含情谊与爱,打动女生的心灵
ThundersArk
754 2
HTML+CSS+JAVASCRIPT实现——情人节表白情书
w7hwgrboggm6g
|
前端开发 容器
面试官：请使用 CSS 实现自适应正方形
面试官：请使用 CSS 实现自适应正方形
w7hwgrboggm6g
501 0
面试官：请使用 CSS 实现自适应正方形
六卿
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
46 0
JS配合CSS3实现动画和拖动小星星小Demo
MiyueFE
|
JavaScript 前端开发
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
MiyueFE
891 2
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
MiyueFE
|
前端开发 JavaScript
CSS进阶向--纯css实现流光边框（二）
CSS进阶向--纯css实现流光边框（二）
MiyueFE
2301 1
CSS进阶向--纯css实现流光边框（二）
MiyueFE
|
前端开发 JavaScript 程序员
CSS进阶向--纯css实现流光边框
CSS进阶向--纯css实现流光边框
MiyueFE
1998 0
ThundersArk
Html+Css实现——时间轴日志
本篇文章，主要讲解一下如何创建一个精美的时间轴日志页面，其中代码里具体的日志内容部分需要自行更改哦！
ThundersArk
386 1
Html+Css实现——时间轴日志
董员外
|
前端开发 容器
我已经说了5种css居中实现的方式了，面试官竟然说还不够？
这是一篇关于居中对齐方式的总结 开篇之前，先问一下大家都知道几种居中的实现方式？ 面试时答出来两三个就不错了，就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
董员外
172 0
我已经说了5种css居中实现的方式了，面试官竟然说还不够？
极客李华
|
前端开发
HTML+CSS实现商品介绍模考（以Apple14为案例）
本文以最通俗易懂的语言为读者提供一个经典CSS小案例，商品介绍模块，并且结合时事，以Apple14为案例进行讲解。
极客李华
181 0
HTML+CSS实现商品介绍模考（以Apple14为案例）

热门文章

最新文章

  • 1
    CSS3实现多样的边框效果
  • 2
    Css基本样式————字体
  • 3
    CSS3-实现单选框radio的小动画
  • 4
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS3实现时间轴效果
  • 7
    05.javascript访问CSS
  • 8
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 9
    CSS伪元素实现的3D按钮
  • 10
    CSS3中的选择器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    68
  • 2
    技术心得：xpath、CSS定位方法
    45
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    158
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    69
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    140
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    49
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    70
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    154
  • 9
    使用HTML和CSS创建响应式表格
    165
  • 10
    常见的css优化方案都有那些
    50

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问