鼠标经过旋转特效

原创 2016年05月30日 20:40:44

<style type="text/css">
.column { overflow: hidden; font-size: 0; }
.justify_fix { display: inline-block; *display: inline; *zoom: 1; width: 100%; height: 0; overflow: hidden; }
    .column { width:1100px; margin: 30px auto; text-justify: inter-ideograph;}
    .column li { width:320px; height:125px; background:url(bg.png) repeat-x left bottom; text-align: center; display: inline-block; *display: inline; *zoom: 1; padding: 0;}
    .column li a {text-align: center; margin: 0; padding: 0;font-size:26px; font-family:"微软雅黑"; color:#2b94c9;}
    .column li a div { display: block; width:150px; margin: 0; *padding-left: 20px; float:left; height:125px; line-height:125px;}
.column li a .ziyuan{display: block; width:150px; margin: 0; *padding-left: 20px; float:left; height:125px; line-height:125px;text-align:left; width:155px;}
    .column li a img { width:120px;height: auto; transition: all 0.5s ease-in-out; float:left; margin-left:20px; }
    .column li a img:hover{
        -ms-transform: rotateY(180deg); /* IE 9 */
        -moz-transform: rotateY(180deg); /* Firefox */
        -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
        -o-transform: rotateY(180deg); /* Opera */
        transform: rotateY(180deg);
    }
    .column li a .column-name { display: block; margin:10px 0; background:url(../images/jiantou.png) no-repeat right;}
</style>



<body>

<ul class="column">
        <li style="float:left;">
          
          <a href="http://www.ahjxgyxx.com:90/" target="_blank">
            <img src="column-1.png">
            <div>
              <span class="column-name">数字校园</span>
            </div>
          </a>
          
        </li>
        <li style="margin-left:70px;float:left;">
          
          <a href="http://ahjxgyxx.zhiyexuexi.com/resource/resource/" target="_blank">
            <img src="column-2.png">
            <div class="ziyuan">
              <span class="column-name">教学资源库</span>
            </div>
          </a>
          
        </li>
        <li style="float:right;">
          
          <a href="/channels/11.html">
             <img src="column-3.png" alt="汇报材料">
            <div>
              <span class="column-name">汇报材料</span>
            </div>
          </a>
          
        </li>
        
        <span class="justify_fix"></span>
      </ul>
</body>

相关文章推荐

css3鼠标经过旋转效果

  • 2015年12月05日 09:39
  • 522KB
  • 下载

一种鼠标经过选项执行切换的特效

在最近帮人改网站时,遇到了这种问题。场景描述如下: 页面初始化时,左侧第一栏“长江学者”要处于选中状态【字体颜色改变,右侧显示该栏目的内容】; 鼠标到左侧其他选项时,选项文字颜色发生变化,右侧内容跟着...

JQuery鼠标经过弹出气泡框的js特效效果

Animated Menu Hover 1 $(document).ready(function(){ $(".menu li").hover(function() { $(this)....
  • rzg813
  • rzg813
  • 2014年07月07日 18:51
  • 2060

30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari ...

CSS3鼠标滑过渐变颜色旋转图标特效

CSS3鼠标滑过渐变颜色旋转图标特效 *{margin: 0;padding: 0;list-style: none;} #order_nav {  position: relative; back...

jquery鼠标经过闪光出现标题特效

  • 2014年08月26日 10:07
  • 313KB
  • 下载

jQuery仿QQ空间图片查看特效(全屏,放大,缩小,旋转,镜像,鼠标滚轮缩放)

  • cometwo
  • cometwo
  • 2016年01月12日 21:47
  • 5064
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标经过旋转特效
举报原因:
原因补充:

(最多只允许输入30个字)