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

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

2022-04-24 609
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 用纯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
394 2
ThundersArk
|
前端开发 JavaScript
HTML+CSS+JAVASCRIPT实现——情人节表白情书
本文主要介绍如何使用HTML三件套来实现制作一封情人节表白情书,富含情谊与爱,打动女生的心灵
ThundersArk
796 2
HTML+CSS+JAVASCRIPT实现——情人节表白情书
w7hwgrboggm6g
|
前端开发 容器
面试官：请使用 CSS 实现自适应正方形
面试官：请使用 CSS 实现自适应正方形
w7hwgrboggm6g
518 0
面试官：请使用 CSS 实现自适应正方形
六卿
|
3月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
58 0
MiyueFE
|
JavaScript 前端开发
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
MiyueFE
947 2
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
MiyueFE
|
前端开发 JavaScript
CSS进阶向--纯css实现流光边框（二）
CSS进阶向--纯css实现流光边框（二）
MiyueFE
2399 1
CSS进阶向--纯css实现流光边框（二）
MiyueFE
|
前端开发 JavaScript 程序员
CSS进阶向--纯css实现流光边框
CSS进阶向--纯css实现流光边框
MiyueFE
2038 0
ThundersArk
Html+Css实现——时间轴日志
本篇文章，主要讲解一下如何创建一个精美的时间轴日志页面，其中代码里具体的日志内容部分需要自行更改哦！
ThundersArk
402 1
Html+Css实现——时间轴日志
董员外
|
前端开发 容器
我已经说了5种css居中实现的方式了，面试官竟然说还不够？
这是一篇关于居中对齐方式的总结 开篇之前，先问一下大家都知道几种居中的实现方式？ 面试时答出来两三个就不错了，就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
董员外
179 0
我已经说了5种css居中实现的方式了，面试官竟然说还不够？
极客李华
|
前端开发
HTML+CSS实现商品介绍模考（以Apple14为案例）
本文以最通俗易懂的语言为读者提供一个经典CSS小案例，商品介绍模块，并且结合时事，以Apple14为案例进行讲解。
极客李华
188 0
HTML+CSS实现商品介绍模考（以Apple14为案例）

热门文章

最新文章

  • 1
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 2
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 3
    jQuery和CSS3滑动展开菜单按钮插件
  • 4
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 5
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 6
    页面滚动触发css3动画js插件
  • 7
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 8
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 9
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 10
    在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
  • 1
    css结构伪类
    66
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    94
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    59
  • 4
    HTML5/CSS3粒子效果进度条代码
    72
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    143
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    59
  • 7
    CSS外边距重叠：原理、结果
    56
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    67
  • 9
    CSS常见用法 以及JS基础语法
    70
  • 10
    css设置内嵌样式阴影
    77

    • 相关课程

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

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • JS零基础入门教程（上册）
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)