純css3滑動星星評分動態效果代碼



254 1015 339



特效描述:純css3 滑動星星評分 動態效果,多種css3星級評分特效,鼠標懸停星星圖標滑動評分特效。

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="starability-minified/starability-all.min.css"/>

2. HTML代碼

<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。</p>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動星星打分 其他 滑動星星打分 鼠標滑過 鼠標懸停 跟隨鼠標移動 星星打分 星星評分 評分
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子