当前位置：首页 > 网页特效 > 其他

star-rating-svg星级评分插件纯CSS3动画效果

分类：其他日期：2024-05-14 点击(33) 评论(0)

简介

#### 适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

------------
### 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>

web299.com

star-rating-svg星级评分插件纯CSS3动画效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果