多种CSS3动画效果星级评分特效

最新推荐文章于 2021-08-04 08:58:10 发布
最新推荐文章于 2021-08-04 08:58:10 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 练手小案例 
<!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>

/* 基本样式 */
.starability{display:block;position:relative;width:150px;min-height:60px;padding:0;border:none}
.starability>input{position:absolute;margin-right:-100%;opacity:0}
.starability>input:checked~label,
.starability>input:focus~label,
.starability>input:hover~label{background-position:0 -30px}
/* .starability>input:focus+label{outline:1px dotted #999} */
.starability>label{position:relative;display:inline-block;float:right;width:30px;height:30px;color:transparent;cursor:pointer;background-image:url(../starability-images/icons.png);background-repeat:no-repeat}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),screen and (-webkit-min-device-pixel-ratio:2){
    .starability>label{background-image:url(../starability-images/icons@2x.png);background-size:30px auto}
}
/* 向上滚动 */
f
.slot>input:checked~label,
.slot>input:focus~label,
.slot>input:hover~label{transition:background-position .7s}
/* 发光动画 */
@keyframes a{
    0%{transform:scale(1)}
    99%{transform:scale(4);opacity:0}
    to{transform:scale(1);opacity:0}
}
.grow>label:before{display:none;position:absolute;content:' ';width:30px;height:30px;background-image:url(../starability-images/icons.png);background-repeat:no-repeat;bottom:0}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),screen and (-webkit-min-device-pixel-ratio:2){
    .grow>label:before{background-image:url(../starability-images/icons@2x.png);background-size:30px auto}
}
.grow>input:checked+label:before{
    display:block;
    animation:a 1s forwards;
}
/* 发光并旋转 */
@keyframes b{
    0%{transform:scale(1) rotate(0)}
    99%{transform:scale(4) rotate(90deg);opacity:0}
    to{transform:scale(1) rotate(0);opacity:0}
}
.growRotate>label:before{display:none;position:absolute;content:' ';width:30px;height:30px;background-image:url(../starability-images/icons.png);background-repeat:no-repeat;bottom:0}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),screen and (-webkit-min-device-pixel-ratio:2){
    .growRotate>label:before{background-image:url(../starability-images/icons@2x.png);background-size:30px auto}
}
.growRotate>input:checked+label:before{
    display:block;
    animation:b 1s forwards;}
/* 淡入淡出 */
@keyframes c{
    0%{transforWm:translateY(30px)}
    80%{opacity:100%}
    to{transform:none;opacity:0}
}
.fade>label:before{display:none;position:absolute;content:' ';width:30px;height:30px;background-image:url(../starability-images/icons.png);background-repeat:no-repeat;background-position:0 -30px;bottom:30px}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),screen and (-webkit-min-device-pixel-ratio:2){.starability-fade>label:before{background-image:url(../starability-images/icons@2x.png);background-size:30px auto}}
.fade>input:checked+label:before{display:block;
    animation:c 1s forwards;}
/* 选择框效果 */
@keyframes d{
0%{transform:translateX(-15px)}
60%{opacity:1}
70%{transform:none}
80%{opacity:1}to{opacity:0}}
.checkmark>label{position:static;z-index:1}
.checkmark>label:before{display:none;position:absolute;content:' ';width:30px;height:30px;background-image:url(../starability-images/icons-checkmark.png);background-repeat:no-repeat;background-position:0 -60px;right:-30px}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),screen and (-webkit-min-device-pixel-ratio:2){.checkmark>label:before{background-image:url(../starability-images/icons-checkmark@2x.png);background-size:30px auto}}
.checkmark>input:checked+label:before{display:block;
    animation:d .7s forwards;}














                

        

        

    




    

      

        

            

              
                
                  lucky芬
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
多种CSS3动画效果星级评分特效.zip

				
			

			

				

					07-04
				

			

		

		

			
				
多种CSS3动画效果星级评分特效是一款共有6种不同的星级评分动画效果，分别是滑动动画，淡入淡出动画，旋转动画，发光动画和复选框动画。

			
		

	



                

              
                



	

		

			

				
					
css3星星好评动态效果

				
			

			

				

					02-24
				

			

		

		

			
				
好评，点击星星的好评，几颗星几颗星，使用于pc和微信

			
		

	



                


  
              

                


	

		

			

				
					
多个CSS3实现的动画效果不错的星级评分效果

				
			

			

				

					06-12
				

			

		

		

			
				
效果描述：
	不需要js支持，只用CSS3就可以实现的评分效果
	使用方法：
	1、将CSS中的样式拷贝到你的网页中
	2、将body中需要的代码部分拷贝到你需要的地方即可

			
		

	





	

		

			

				
					
利用CSS3做的星级评分

				
			

			

				

					weixin_44286392的博客
				

				

					05-18
					
					292
					
				

			

		

		

			
				
之前在HTML5的课上学到了很多零碎的知识，从老师那儿也获得了很多关于HTML零碎的学习资源。把这些代码分享出来，还可以节省电脑空间。
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用纯CSS3做的星级评分</title>
	<style>
	*{padding: 0px;margin: 0px;}
	.box{ma

			
		

	



		

			
		



	

		

			

				
					
星级特效（购物好评几颗星星）

				
			

			

				

					Alone patients的博客
				

				

					09-04
					
					213
					
				

			

		

		

			
				
html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,ul,li{
				padding: 0;
				margin: 0;
			}...

			
		

	





	

		

			

				
					
多种CSS3动画效果星级评分特效特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用CSS3来创建多种星级评分特效。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和功能，其中包括强大的动画效果，使得网页设计更加生动有趣。我们将...

			
		

	





	

		

			

				
					
炫酷纯CSS3星级评分动画特效

				
			

			

				

					12-13
				

			

		

		

			
				
总的来说，"炫酷纯CSS3星级评分动画特效"是Web设计师和开发者的一个强大工具，它利用CSS3的先进特性，创造出引人入胜的星级评分交互体验，为网站增色不少。无论是在电子商务网站的商品评价，还是在博客、论坛的用户...

			
		

	





	

		

			

				
					
css3图标星星评级打分动画特效

				
			

			

				

					06-11
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用CSS3来创建一个动态的星星评级打分系统，该系统具有鼠标悬停时星星变为实心并放大的动画效果。这个特效是通过结合CSS3的选择器、伪类、过渡（transition）和图标库来实现的。  首先...

			
		

	





	

		

			

				
					
css滑动星星评分,纯css3滑动星星打分动画特效

				
			

			

				

					weixin_29388659的博客
				

				

					08-04
					
					416
					
				

			

		

		

			
				
特效描述：纯css3 滑动星星打分动画。纯css3滑动星星打分动画特效代码结构1. 引入CSS2. HTML代码基本样式：Basic star rating:5 stars4 stars3 stars2 stars1 star向上滚动：slotBasic star rating:5 stars4 stars3 stars2 stars1 star发光动画：growBasic star rating...

			
		

	





	

		

			

				
					
多种动画效果星级评分

				
			

			

				

					06-01
				

			

		

		

			
				
多种动画效果星级评分

			
		

	





	

		

			

				
					
纯CSS3几何图形圆点动画特效.zip

				
			

			

				

					07-04
				

			

		

		

			
				
纯CSS3几何图形圆点动画特效是一款css3基于animation属性制作密集圆点几何图形动画特效。

			
		

	





	

		

			

				
					
JS插件实现360球形波浪动画打分样式波浪进度条

				
			

			

				

					08-12
				

			

		

		

			
				
JS插件实现360球形波浪动画打分样式/波浪进度条

			
		

	





	

		

			

				
					
[ CSS-CSS3 ] 史上最全CSS样式一览表

				
			

			

				

					01-08
				

			

		

		

			
				
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和positionCSS3CSS3(I) 圆角边框与阴影CSS3(II) 文本与文字CSS3(III) 2D转换CSS3(IV) 过渡与动画CSS3(V) 3D变换
CSS样式
CSS添加方法
CSS添加方法—行内

 段落文字 

CSS添加方法—内嵌样式

p{
color:red; /*设置字体颜色*/


			
		

	





	

		

			

				
					
bootstrap五星评分_炫酷纯CSS3星级评分动画特效

				
			

			

				

					weixin_28977123的博客
				

				

					01-12
					
					476
					
				

			

		

		

			
				
starability.css是一款炫酷纯CSS3星级评分动画特效。该特效中共有6种不同的星级评分动画效果，分别是滑动动画，淡入淡出动画，旋转动画，发光动画和复选框动画。该星级评分特效使用纯HTML和CSS来制作，你甚至可以使用键盘来访问控制评分，屏幕阅读器也能够阅读出当前选择的评分。需要注意的是，该星级评分特效只是提供了星级的样式和动画，如果你需要后台可以获取用户当前选择的星星数量，还自己需要额...

			
		

	





	

		

			

				
					
HTML+CSS实现五角星评分效果

				
			

			

				

					小龙哒的博客
				

				

					06-05
					
					1万+
					
				

			

		

		

			
				
文章目录1.效果：2.HTML3.CSS4.图片
1.效果：

技术栈 H5+CSS3+JQ+Bootstrap
2.HTML
<!DOCTYPE html>
<!--suppress CssUnusedSymbol, JSUnresolvedLibraryURL -->
<html lang="zh-CN">
<head>
    <meta...

			
		

	





	

		

			

				
					
巧用边框：使用三个div画出一个八卦图形

				
			

			

				

					橙子好的博客
				

				

					12-23
					
					1047
					
				

			

		

		

			
				
话不多说，先上图分析结构 
 
按照正常的思路，在观看这个图形的时候，我们会想到这个图形是按照五个结构来通过颜色设置和形状设定以及定位进行安装的。 
这个，我们其实只要使用三个div就可以画出这个八卦图形 
首先创建三个div标签：<div id="box">
            <div class="one"></div>
            <div class="two"></div

			
		

	





	

		

			

				
					
10个超漂亮的CSS 3D特效

					
热门推荐

				
			

			

				

					Mr_王小峰的博客
				

				

					08-11
					
					5万+
					
				

			

		

		

			
				
在油管上看到了10个超漂亮的CSS 3D特效，遂分享给大家，有写是css+JavaScript实现的。

3D Slicebox

在3D立方体上寻找图像幻灯片？查看演示



图像转换

与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个，相信我！查看演示



3D条形图

将无聊的平面2D图表转换为3D图表。查看现场演示，点击下面的图片获取源代码。查看演示

...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值