只使用HTML和CSS实现点亮五角星效果

1.点击一个亮一个

思路：使用链接标签a包裹li，设置li的ID属性，让父级a标签的href属性值为l子级li的ID(锚点)，点击父级a标签触发子级li标签的锚点，再结合:target伪类进行背景图片替换即可实现效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>点击亮星星</title><style type="text/css">ul li {list-style: none;width: 60px;height: 57px;background-image: url(img/01.png);background-repeat: no-repeat;float: left;}/*在当前li被选中为锚点时触发*/ul li:target {background-image: url(img/02.png);}</style></head><body><ul><a href="#a"><li id="a"></li></a><a href="#b"><li id="b"></li></a><a href="#c"><li id="c"></li></a><a href="#d"><li id="d"></li></a><a href="#e"><li id="e"></li></a></ul></body>
</html>

2.点一个左边五角星全亮，而右边不亮，即评分效果

思路：
方法一：采用锚点触发方法，:target伪类触发，让触发的a标签的右边所有弟弟元素(使用~选择器)全替换为不亮状态(默认全亮状态)
方法二：使用单选按钮的 :checked伪类触发，对右边弟弟元素中的label进行内容替换(label和input绑定)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>五星好评</title><style type="text/css">a::before{content: url(img/02.png);}a:target~a::before{content: url(img/01.png);}/* 单选框的方法 */ label::before{content: url(img/02.png);}input[type="radio"]{display: none;}input[type="radio"]:checked+label~label{content: url(img/01.png);}</style></head><body><!-- 锚点方法 --><p>锚点的方法</p><a id="a" href="#a"></a><a id="b" href="#b"></a><a id="c" href="#c"></a><a id="d" href="#d"></a><a id="e" href="#e"></a><p>单选框的方法</p><input type="radio"  name="xin" id="ca"><label for="ca"></label><input type="radio" name="xin" id="cb"><label for="cb"></label><input type="radio" name="xin" id="cc"><label for="cc"></label><input type="radio" name="xin" id="cd"><label for="cd"></label><input type="radio" name="xin" id="ce"><label for="ce"></label></body>
</html>

只使用HTML和CSS实现点亮五角星效果相关推荐

CSS如何实现内凹角效果 By 大漠
记得@Lea Verou的<CSS Secrets>一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果.我也尝试着借助Vue的能力,把这种效果构建成一个 ...
java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源代码请从 git ...
css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果转自:掘金 - alphardex 前言切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
CSS如何实现内凹角效果
特别声明:此篇文章内容来源于@ANA TUDOR翻译的<Scooped Corners in 2018>一文. 记得@Lea Verou的<CSS Secrets>一书和前几天 ...
在CSS中实现父选择器效果
为何CSS不支持父选择器? 这个问题的答案和"为何CSS相邻兄弟选择器只支持后面的元素,而不支持前面的兄弟元素?"是一样的. 浏览器解析HTML文档,是从前往后,由外及里的.所以, ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...

只使用HTML和CSS实现点亮五角星效果

1.点击一个亮一个

2.点一个左边五角星全亮，而右边不亮，即评分效果

只使用HTML和CSS实现点亮五角星效果相关推荐

最新文章

热门文章