html图片旋转动画

实现效果：鼠标悬停在图片的一定范围内，红色箭头指向的圆圈会旋转，移出则停止

HTML源代码：

        

            
                

                

                

                    

                        
美国队长
                        
热爱和平
                    
                
            
        
    

CSS样式：

.case-content{overflow:hidden;margin:80px auto 0 auto;width:1200px}
.case-item{
    float:left;
    margin:30px 40px;
    margin-bottom:20px
}
.ih-item{
    position:relative;
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out
}
.ih-item,.ih-item *{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.ih-item a{color:#333}
.ih-item a:hover{text-decoration:none}
.ih-item img{width:100%;height:100%;}
.ih-item.circle,
.ih-item.circle .img{position:relative;width:210px;height:210px;border-radius:50%;}
.ih-item.circle .img:before{position:absolute;display:block;content:'';
    width:100%;height:100%;border-radius:50%;
    box-shadow:inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.3);
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out
}

transition- property：规定设置过渡效果的CSS 属性的名称 transition-duration：规定完成过渡效果需要多少秒或毫秒。 transition- timing-function：规定速度效果的速度曲线。 transition -delay: 定义过渡效果何时开始。