• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

CSS星星打分特效

互联网 diligentman 7天前 6次浏览

首先看一下效果如下:
CSS星星打分特效
CSS星星打分特效
点击第几颗星星就可以亮几颗星星哦。
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部分如下:

<style>
		body{
			background: black;
		}
		.box{
			margin: 300px auto;
			width: 400px;
			height: 150px;
			display: flex;
			flex-direction: row-reverse;	
		}
		.box input{
			appearance: none;
		}
		.box label{
			background: url("未标题-2.png") no-repeat;
			width: 40px;
			height: 40px;
			display: block;	
		}
		.box > input:checked ~ label{
			background: url("未标题-1.png") no-repeat;
			transition: 1s;
		}
	</style>

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星星打分特效
喜欢 (0)