服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > 开发教程 > HTML/CSS教程 >

纯CSS3编写一个渐变效果的进度条

时间:2016-01-15 17:39来源:未知 作者:最模板 点击:次
做成的效果就是如上图所示的效果,那么要做到这种效果需要了解哪些相关的知识点呢？ CSS3之linear-gradient CSS3之animation CSS3之border-radius linear-gradient 线性渐变 linear-gradient(to bottom, #fff 0%
 

做成的效果就是如上图所示的效果,那么要做到这种效果需要了解哪些相关的知识点呢？

  • CSS3之linear-gradient
  • CSS3之animation
  • CSS3之border-radius
 

linear-gradient 线性渐变


		

			

				
    
					
  1. 
						linear-gradient(to bottom, #fff 0%, #333 100%);
    2. 
				

			

		

		

			 

	

	

		
    
			
  • 
				"to bottom" 从上至下渐变,也有to left从左至右,to right  to top
    • 
			
  • 
				#ff 0% 从顶部开始(案例为to bottom) 上面一部分是白色的
    • 
			
  • 
				#333 100% 然后渐变到#333的效果
    • 
		

		

			举例:

		

		

			

				
    
					
  1. 
						linear-gradient(-45deg, rgba(255,255,255,0.5)0%, #324512 60%,#333 100%);
    2. 
				

			

		

		

			 

		

			角度可以用deg的形式, 颜色也可以用rgba rgb transparent  后面的百分比是用来规划渐变区域 中间通过英文半角逗号分隔

		

			animation 动画

		

		

			

				
    
					
  1. 
						animation:soul 2s ease-out infinite;
    2. 
					
  2. 
						 
    3. 
					
  3. 
						@-webkit-keyframes soul{
    4. 
					
  4. 
						0%{
    5. 
					
  5. 
						width:0;
    6. 
					
  6. 
						}
    7. 
					
  7. 
						 
    8. 
					
  8. 
						100%{
    9. 
					
  9. 
						width:100%;
    10. 
					
  10. 
						}
    11. 
					
  11. 
						}
    12. 
				

			

			

				

					

						

							 

						

							 

					

				

			

		

		
    
			
  • 
				soul 动画的名字 利用@keyframes来规定名字
    • 
			
  • 
				2s 动画持续时间
    • 
			
  • 
				ease-out 动画过渡效果
    • 
			
  • 
				infinite 动画反复播放
    • 
		

	

	

		 

	

		border-radius 圆角

	

		

		

			

				
    
					
  1. 
						border-radius:10px 20px 30px 40px/5px 10px 15px 20px;
    2. 
				

			

		

	

	

		
    
			
  • 
				10px(左上角水平半径) 20px(右上角水平半径) 30px(右下角水平半径) 40px(左下角水平半径)
    • 
			
  • 
				/5px(左上角垂直半径) 10px(右上角垂直半径)  15px(右下角垂直半径)  20px(左下角垂直半径)
    • 
			
  • 
				中间通过/分隔
    • 
		

	

	

		 

	

		举例:

	

		

		

			

				
    
					
  1. 
						border-radius:8px
    2. 
				

			

			

				

					

						

							 

						

							 

					

				

			

		

		

			实际上我们一般不会深究这些属性，除非是必须要用到的时候

	





(责任编辑：最模板)

			

			

			

				
    
          
				




			

			




			
			

				

					
顶一下

					
(1)

					

						

						
100%

					

				

				

					
踩一下

					
(0)

					

						

						
0%

					

				

			

			
			
			
			

				------分隔线----------------------------
			

			

				

					
				

			
			

		











 		
		
		

        

          

				
栏目列表

				

					
				

			

        
   
		
		

			

				
热点内容

				

					
				

			

		


		

			

				
随机内容

				

					
				

			

		

              

			

				
随机模板

				

					
				

			

		

	




         
        

    	   

                       
    	   

                    CopyRight © 2010-2016 最模板 ZuiMoban.Com, All Rights Reserved.