CSS3圆形覆盖的多种好看的效果CircleHoverEffects

  插件描述：今天我要给大家介绍一款圆形覆盖的多种好看的效果 Circle Hover Effects。圆形在当前的设计领域还是用得比较多的，我们只需要准备正常的矩形图片，然后就可以在这款特效的样式下变成圆形图片。接着当我们鼠标移动到图片上时，就会呈现多种不同的效果了。注意css圆形，该特效是基于css3打造的css圆形，所以我们的浏览器必须支持css3才能看到效果。

  今天我要给大家介绍一款圆形覆盖的多种好看的效果 Circle Hover Effects。圆形在当前的设计领域还是用得比较多的，我们只需要准备正常的矩形图片，然后就可以在这款特效的样式下变成圆形图片。接着当我们鼠标移动到图片上时，就会呈现多种不同的效果了。注意，该特效是基于css3打造的，所以我们的浏览器必须支持css3才能看到效果。

  预览图

  width="474" />

  width="474" />

  width="474" />

  使用步骤

  1、在body标签中加入以下格式的html代码

   
    
                 
                          
                ###
                    Use what you have
                
                

                    by Angela Duncan View on Dribbble
                
            
        
    
           
                 
                          
                ###
                    Common Causes of Stains
                
                  
                    by Antonio F. Mondragon View on Dribbble
                
            
        
    
       
         
                  
                ###
                    Pink Lightning
                
                  
                    by Charlie Wagers View on Dribbble
                
            
        
    

  大家可以注意到，事实上在这里我们并没有用到图片，那么为什么会有圆形图片效果呢，这个就需要我们在css中以 ch-img- 开头的样式中去定义了。

  2、公共css样式

 .ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
 
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}
 
.ch-grid:after {
    clear: both;
}
 
.ch-grid li {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

  以上两步定义了图片的html结构和公共的css样式，那么接下来我们就根据不同的效果来添加不同的鼠标样式了。

  一共有7种效果可供我们选择，在此我就不一一讲解了。大家可以到官网来了解你想要得效果的样式，每个效果下面都会有额外的样式。还可以在我们的下载源码中去获取相关的数据，每个demo我们都已经分开成单独的html文件了，便于我们查看。