以下是 多种CSS3动画效果星级评分特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多种CSS3动画效果星级评分特效</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" type="text/css" href="starability-minified/starability-all.min.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>
CSS代码(zzsc.css):
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.content{width:100%;}
.starability-container{width:350px;margin:0 auto;padding:2em 0;border-bottom:1px solid #D5D6E2;}
.center{text-align:center;}
分享到QQ
分享到微博
微信扫一扫
