css3实现鼠标放上去图片旋转360度

作者:超级无敌大飞   阅读 (4266)  |  收藏 (0)  |  点赞 (0)

摘要

本博客将讲解如何使用css3实现鼠标滑过图片,图片旋转360度的效果。


原文链接:css3实现鼠标放上去图片旋转360度

    本博客将讲解如何使用css3实现鼠标滑过图片,图片旋转360度的效果。

    CSS代码如下:

.xiangguan {
   width: 100%;
   overflow: hidden;
}
 
.xiangguan div {
   display: block;
   font-size: 14px;
   float: left;
   overflow: hidden;
   width: 25%;
   text-align: center;
   margin-bottom: 20px;
   padding-top: 10px;
   color: #fff;
}
 
.xiangguan div a {
   overflow: hidden;
   display: inline-block;
   width: 50px;
   height: 50px;
   margin: auto;
   border-radius: 100px;
   -webkit-border-radius: 100px;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
}
 
.xiangguan div a i {
   line-height: 50px;
   font-size: 20px;
   margin: 0;
}
 
.xiangguan div a img {
   width: 100%;
   height: 100%;
}
 
.xiangguan div span {
   display: block;
   width: 100%;
   padding-top: 10px;
   color: #777;
}
 
.xiangguan .benbo {
   background: #0cabd3;
}
 
.xiangguan>div>.mail-btn {
   background: #0cd38f;
   padding: 0;
}
 
.xiangguan .taobao {
   background: #ee4f08;
}
 
.xiangguan .side-fx {
   background: #8aee08;
   cursor: pointer;
}
 
.xiangguan a:hover {
   opacity: 0.8;
   transform: rotate(360deg) scale(1.3);
}
 
.xiangguan a i {
   color: inherit;
}

html页面如下 :

<div>
      <label for="blog_key">文章标签</label> <input data-role="tagsinput"
             id="blogKey" name="blogKey" placeholder="按enter键结束输入"
                                     value="${blog.blogKey }" />
 </div>
 
 <div>
       <button class="btn btn-info" type="submit" id="blog_submit">提&nbsp;&nbsp;&nbsp;交</button>
       <button class="btn btn-success" type="button" id="blog_temp">保&nbsp;存&nbsp;草&nbsp;稿</button>
 </div>
                           
<div><a href="http://www.ixiao20.com/Article/?47.html" target="_blank" title=""><img src="<%=path%>/css/a.gif"
                   /></a><span>模板下载</span></div>
      <div><a href="https://item.taobao.com/item.htm?id=535477522246" target="_blank" title=""><i></i></a><span>淘宝店铺</span></div>
       <div><a title=""><i></i></a><span>分享本博</span></div>
       <div><a href="javascript:;" title=""><i></i></a><span>订阅我</span></div>                       
</div>


分类   Spring 管理
字数   1971

博客标签    css3   鼠标滑过图片旋转   CSS旋转图片  

评论