音乐专辑展示动效--CSS3旋转

这个案例介绍如何使用css3实现音乐专辑展示动效，效果如下：

效果图

第一步：

分析布局搭建结构，盒子内部有一个专辑封面图和渐变底色的弹出层，为了制作专辑列表效果，盒子使用ul>li布局，里面弹出层使用为元素:before，和伪元素同级的有专辑标题文字h3和日期文字段落p，分享按钮使用iconfont，详细结构如下：

    
        
        
        
            
    
    
        

            

                

                    
                    

                        
花约--Twins
                        
2017-06-22
                    
                    

                        
                        
                    
                
            
        
    

第二步：

先把静态布局书写出来，遮罩层和内容描述icon都使用定位，详细css样式如下：

    
        
        
        
            
        
    
    
        

            

                

                    
                    

                        
花约--Twins
                        
2017-06-22
                    
                    

                        
                        
                    
                
            
        
    

样式书写后，效果如下图：

静态效果图

第三步：

书写css3动效，通过观察分析最终效果图可知，当鼠标移上类名为total盒子的时候，图片进行了逆时针旋转放大，遮罩层默认不透明度为0，并进行了顺时针旋转缩小，文字缩小并伴随着不透明度变化，icon放大出现，鼠标移上对应的iconfont，修改背景颜色和添加投影。

添加css3动效果后代码如下，包含详细注释：

    
        
        
        
            
        
    
    
        

            

                

                    
                    

                        
花约--Twins
                        
2017-06-22
                    
                    

                        
                        
                    
                
            
        
    

第四步：

复制结构修改内容，调整盒子间距，得到最终效果如下图：

最终效果