纯css3滑动星星评分动态效果代码



249 992 331



特效描述:纯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

加群请备注:从官网了解到