Hover图片旋转_html/css_WEB-ITnose

                Hover图片旋转        *{margin:0px; padding:0px;}    body{background:#eaeaea;}    .main{width:960px; margin:50px auto;}    .main a{display:block;width:300px;height:300px; border:5px solid #FFFFFF; box-shadow:1px 1px 1px #cccccc ,-1px -1px 3px #3a3a3a; position:relative; overflow:hidden; float:left; margin:10px;}    .caption{ position:absolute;background:rgba(0,0,0,0.3); color:#FFFFFF; left:0px;  z-index:99; width:300px; line-height:30px; bottom:-30px;}    .caption p{text-align:center; font-size:12px;}    .main a:hover img{transition:all 800ms ease-out; transform:rotate(360deg);}    .main a:hover .caption{transition:all 300ms ease-out; transform:translateY(-100%);}           
                                                  
圈圈转起来

      
查看更多关于Hover图片旋转_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110216