您的位置：首页 > 其它

鼠标经过旋转特效

2016-05-30 20:40 323 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航