分类入口动画--css3位移滤镜透明度

分享一个CSS3制作的分类入口动画效果，主要使用了CSS3位移translate，滤镜filter和透明度opacity，整体动画效果如下：

效果图.gif

第一步：

书写html结构布局，结构主要是a分类入口盒子，img入口图片和.white白色遮罩，.txtbox文字盒子。对应的内容html里面有注释。

下面是详细的html结构代码：

        

        
        
            
            
            
            

            
            

                
居家收纳
                
Home Daily
            
        
        
        
            
            
            
            

            
            

                
居家收纳
                
Home Daily
            
        
        
        
            
            
            
            

            
            

                
居家收纳
                
Home Daily
            
        
        
        
            
            
            
            

            
            

                
居家收纳
                
Home Daily
            
        

    

第二步：

书写css静态样式，注意使用的图片是正方形，a分类入口盒子要旋转transform:rotate(-45deg)变成棱形，a分类入口盒子里面的文字盒子.txtbox要旋转回正方向transform:rotate(45deg)，对应的代码在css里面有注释提示。

旋转前

旋转后

第三步：

书写好静态布局，开始制作动画，下面是动画制作思路，相关代码在css里面有注释。

鼠标移动上a盒子，a盒子保持旋转旋转translate(-45deg)，位移transform:translate(5px)。

默认设置.white白色遮罩的透明度opacity设置成0。
鼠标移动上a盒子，设置白色遮罩.white透明的opacity变成1显示。

默认设置标题h3和段落p设置位正负值transform:translate(100%)移出盒子外部。
鼠标移动上a盒子，设置标题h3和段落p设置transform:translate(0)回到原来的位置。

鼠标移动上a盒子，设置图片滤镜， filter: grayscale(100%) blur(2px); 灰度100%并且模糊blur。

注意：以上:hover鼠标移上效果都需要回到标签初始状态添加transition过渡时间。

下面是详细的css布局样式+动画的代码：