CSS星星打分特效

首先看一下效果如下:
CSS星星打分特效_第1张图片
CSS星星打分特效_第2张图片
点击第几颗星星就可以亮几颗星星哦。
HTML布局如下:

<div class="box">
		<input type="radio" id="a" name="xing">
		<label for="a">label>
		<input type="radio" id="b" name="xing">
		<label for="b">label>
		<input type="radio" id="c" name="xing">
		<label for="c">label>
		<input type="radio" id="d" name="xing">
		<label for="d">label>
		<input type="radio" id="e" name="xing">
		<label for="e">label>	
	div>

一个大的div里面放五个input标签和五个label标签。
CSS部分如下:


1) 把body标签的背景颜色调成黑色,在box这个类里面用弹性布局 display:flex,flex-direction:row-reverse意思是主轴为水平方向,起点在右端。默认值是row。

2) 把input标签里面的type=“radio”用appearance属性把属性值设置成none。

3) 把label标签的背景设置成那张 灰色星星的背景图片no-repeat:不重复;设置它的高宽,label标签是一个行内元素,用display属性把它设置成一个块级元素 。

4) 最后 .box > input:checked ~ label的意思是:相邻同胞选择器,选择被勾选的input标签后 所有的label标签[input 和 label标签有共同的父元素];把背景设置成黄色星星的那张背景图片。

这里普及一下:
flex-direction是一个复合属性;它有4个值。
1)row:主轴为水平方向,起点在左端。
2)row-reverse:主轴为水平方向,起点在右端。
3)column:主轴为垂直方向,起点在上沿。
4)column-reverse:主轴为垂直方向,起点在下沿。

你可能感兴趣的:(css)