鼠标经过旋转特效

原创 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>

鼠标移动3D翻转动画特效

好久没有更新文章咯,今天我为大家带来一个酷炫的3D翻转特效效果例子(该效果是用的纯html+css3实现的哦) 特别指示: 1、用到咯;perspective a) perspe...
  • chenxi1025
  • chenxi1025
  • 2016年08月04日 14:21
  • 973

旋转特效-鼠标经过

旋转特效: *{margin:0px;padding:0px;} body{background:url("images/bodyBg.jpg");} #nav{width:980p...
  • chenXiaosCode
  • chenXiaosCode
  • 2016年08月30日 13:37
  • 124

css3 鼠标滑过图片时文字旋转动画

特效描述:鼠标滑过图片的时候,以左上角为原点,顺时针旋转90度出现黑色遮罩层,之后文字一行行以右上角为原点旋转180度出现,纯css3实现,拷贝下面代码保存为html文件就可以查看效果。(所用到的图片...
  • daimomo000
  • daimomo000
  • 2016年12月17日 16:02
  • 1463

HTML鼠标滑过特效教程

时下,各种个性化展示网站都会通过鼠标特效增强与用户之间的交互,使得网站更加生动,仿佛懂得跟用户谈话一样。就连展示模式相对古板的信息类网站或者门户网站也抵挡不住诱惑,悄悄地加入了一些按钮互动的效果。 ...
  • hzp666
  • hzp666
  • 2017年02月06日 15:54
  • 968

鼠标放上去Div旋转特效代码

这是一个CSS3特效,IE下看不到效果。一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转。代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的...
  • life66881
  • life66881
  • 2015年06月06日 13:37
  • 1786

CSS3-鼠标经过图片旋转、缩放、还原

在线演示 html: css: .box img{ width: 250px; height: 450px; } @-webki...
  • erdouzhang
  • erdouzhang
  • 2017年03月13日 16:35
  • 1543

CSS3制作鼠标经过三角形旋转

在线演示html:css:#box { margin: 100px auto; width: 0; height: 0; border: 30px solid tran...
  • erdouzhang
  • erdouzhang
  • 2017年04月01日 09:49
  • 199

css3鼠标经过,图片放大效果

css代码/*图片划过改变图片大小效果*/ .list ul li { width: 228px; height: 270px; overflow: hidden; z-index: 1; posit...
  • qq_31648761
  • qq_31648761
  • 2016年12月15日 10:07
  • 1302

9种CSS3 blend模式制作的鼠标滑过图片标题特效

这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效。该图片标题特效在鼠标滑过一张图片的时候,图片的标题会相应的动画,并且图片会使用css blend模式渲染为非...
  • sunny_girls
  • sunny_girls
  • 2015年06月06日 13:26
  • 935

JQ鼠标滑过特效

从网上找到一个JQ判断鼠标从什么方向进入一个容器的代码,不过没有注释,一眼看上去可能有点难理解,于是我就写了一个分析帮助理解 代码: 判断鼠标进入方向 html,body...
  • bluesky466
  • bluesky466
  • 2014年12月03日 22:54
  • 1260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标经过旋转特效
举报原因:
原因补充:

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