HTML5/CSS3鼠标滑过图片滤镜动画效果

阅读更多

HTML5/CSS3鼠标滑过图片滤镜动画效果

以前我们用CSS的滤镜属性来对图片做特殊的效果处理，比如阴影、模糊等。今天我们用HTML5和CSS3来实现图片的特效处理，当我们将鼠标滑过图片时，即会出现很不错的图片动画特效，像淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。

http://www.html5tricks.com/demo/adipoli/index.html

    
		
        
        
        
        
        
        
        
        
        
        
        
        

        
        
        


        
        


        
    
    
	
        

            
        
        

            


            

                
startEffect : grayscale, hoverEffect : normal(For HTML5 Browsers)
                
                
                
            


            

                
startEffect : normal, hoverEffect : popout
                
                
                
            


            

                
startEffect : overlay, hoverEffect : sliceDown
                
                
                
            
			
            

                
startEffect : transparent, hoverEffect : boxRandom
                
                
                
            
            

                
startEffect : overlay, hoverEffect : foldLeft
                
                
                
            
            

                
startEffect : transparent, hoverEffect : boxRainGrowReverse
                
                
                
            
            
            
           
            
    

二、

jQuery 3D图片滑块焦点图插件

这是一款很酷的jQuery 3D焦点图插件，和之前分享的jQuery焦点图不同的是，这款焦点图插件的图片切换播放样式是3D的，图片就像立方体一样可以上下翻滚，同时你不仅可以点击焦点图的左右切换按钮，也可以通过图片下方的小按钮进行图片切换。


http://www.html5tricks.com/demo/Adaptors/index.html

	
	

	
  

	
	  


      


        


          
          

          

            

              

                
              
              

                
              
              

                
              
              

                
              
              

                
              
            
          

          

        

        

          

            

              

              

              

              

              

            
          
        
      




      

        
Select effect
        

          
Vertical 3D scroll
          
Horizontal 3D scroll
          
Vertical scroll
          
Horizontal scroll
          
Blind left
          
Blind down
          
Fade