基本信息
源码名称：css3实现星级评价效果示例
源码大小：7.42KB
文件格式：.zip
开发语言：CSS
更新时间：2019-02-18
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>多个CSS3实现的动画效果不错的星级评分效果</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/starability.css"/>
</head>
<body>
<section>
	<div class="starability-container">
	<h3>基本样式：</h3>
	<form>
	<fieldset class="starability-basic">
		  <legend>Basic star rating:</legend>

		  <input type="radio" id="rate5-1" name="rating" value="5" />
		  <label for="rate5-1" title="Amazing">5 stars</label>

		  <input type="radio" id="rate4-1" name="rating" value="4" />
		  <label for="rate4-1" title="Very good">4 stars</label>

		  <input type="radio" id="rate3-1" name="rating" value="3" />
		  <label for="rate3-1" title="Average">3 stars</label>

		  <input type="radio" id="rate2-1" name="rating" value="2" />
		  <label for="rate2-1" title="Not good">2 stars</label>

		  <input type="radio" id="rate1-1" name="rating" value="1" />
		  <label for="rate1-1" title="Terrible">1 star</label>
		</fieldset>
	</form>
	</div>
</section>
<section>
	<div class="starability-container">
	<h3>向上滚动：slot</h3>
	<form>
	<fieldset class="starability-slot"> 
		  <legend>Basic star rating:</legend>

		  <input type="radio" id="rate5-2" name="rating" value="5" />
		  <label for="rate5-2" title="Amazing">5 stars</label>

		  <input type="radio" id="rate4-2" name="rating" value="4" />
		  <label for="rate4-2" title="Very good">4 stars</label>

		  <input type="radio" id="rate3-2" name="rating" value="3" />
		  <label for="rate3-2" title="Average">3 stars</label>

		  <input type="radio" id="rate2-2" name="rating" value="2" />
		  <label for="rate2-2" title="Not good">2 stars</label>

		  <input type="radio" id="rate1-2" name="rating" value="1" />
		  <label for="rate1-2" title="Terrible">1 star</label>
		</fieldset>
	</form>
	</div>
</section>
<section>
	<div class="starability-container">
	<h3>发光动画：grow</h3>
	<form>
	<fieldset class="starability-grow"> 
		  <legend>Basic star rating:</legend>

		  <input type="radio" id="rate5-3" name="rating" value="5" />
		  <label for="rate5-3" title="Amazing">5 stars</label>

		  <input type="radio" id="rate4-3" name="rating" value="4" />
		  <label for="rate4-3" title="Very good">4 stars</label>

		  <input type="radio" id="rate3-3" name="rating" value="3" />
		  <label for="rate3-3" title="Average">3 stars</label>

		  <input type="radio" id="rate2-3" name="rating" value="2" />
		  <label for="rate2-3" title="Not good">2 stars</label>

		  <input type="radio" id="rate1-3" name="rating" value="1" />
		  <label for="rate1-3" title="Terrible">1 star</label>
		</fieldset>
	</form>
	</div>
</section>
<section>
	<div class="starability-container">
	<h3>发光并旋转：growRotate</h3>
	<form>
	<fieldset class="starability-growRotate"> 
		  <legend>Basic star rating:</legend>

		  <input type="radio" id="rate5-4" name="rating" value="5" />
		  <label for="rate5-4" title="Amazing">5 stars</label>

		  <input type="radio" id="rate4-4" name="rating" value="4" />
		  <label for="rate4-4" title="Very good">4 stars</label>

		  <input type="radio" id="rate3-4" name="rating" value="3" />
		  <label for="rate3-4" title="Average">3 stars</label>

		  <input type="radio" id="rate2-4" name="rating" value="2" />
		  <label for="rate2-4" title="Not good">2 stars</label>

		  <input type="radio" id="rate1-4" name="rating" value="1" />
		  <label for="rate1-4" title="Terrible">1 star</label>
		</fieldset>
	</form>
	</div>
</section>
<section>
	<div class="starability-container">
	<h3>淡入淡出：fade</h3>
	<form>
	<fieldset class="starability-fade"> 
		  <legend>Basic star rating:</legend>

		  <input type="radio" id="rate5-5" name="rating" value="5" />
		  <label for="rate5-5" title="Amazing">5 stars</label>

		  <input type="radio" id="rate4-5" name="rating" value="4" />
		  <label for="rate4-5" title="Very good">4 stars</label>

		  <input type="radio" id="rate3-5" name="rating" value="3" />
		  <label for="rate3-5" title="Average">3 stars</label>

		  <input type="radio" id="rate2-5" name="rating" value="2" />
		  <label for="rate2-5" title="Not good">2 stars</label>

		  <input type="radio" id="rate1-5" name="rating" value="1" />
		  <label for="rate1-5" title="Terrible">1 star</label>
		</fieldset>
	</form>
	</div>
</section>
<section>
	<div class="starability-container">
	<h3>选择框效果：checkmark</h3>
	<form>
	<fieldset class="starability-checkmark"> 
		  <legend>Basic star rating:</legend>

		  <input type="radio" id="rate5-6" name="rating" value="5" />
		  <label for="rate5-6" title="Amazing">5 stars</label>

		  <input type="radio" id="rate4-6" name="rating" value="4" />
		  <label for="rate4-6" title="Very good">4 stars</label>

		  <input type="radio" id="rate3-6" name="rating" value="3" />
		  <label for="rate3-6" title="Average">3 stars</label>

		  <input type="radio" id="rate2-6" name="rating" value="2" />
		  <label for="rate2-6" title="Not good">2 stars</label>

		  <input type="radio" id="rate1-6" name="rating" value="1" />
		  <label for="rate1-6" title="Terrible">1 star</label>
		</fieldset>
	</form>
	</div>
</section>

</body>
</html>