<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS3鼠标滑过图标放大旋转动画DEMO演示</title>
  <style type="text/css">
  *{margin:0px;padding:0px;}
  #nav{width:980px;height:350px;margin:50px auto;}
  #nav ul li{list-style:none;background:rgba(0,0,0,.5);height:105px;width:180px;float:left;margin:60px 5px;position:relative;}  
  #nav ul li:before{
    content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;
    transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
  }
  #nav ul li:after{
    content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;z-index:1;
    transform:rotate(-60deg);
    -webkit-transform:rotate(-60deg);
    -moz-transform:rotate(-60deg);
  }
  #nav ul li.mar{margin-left:100px;}
  #nav ul li img{
    top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:2;position:absolute;
    transition:1s;
    -webkit-transition:1s;
    -moz-transition:1s;
  }
  #nav ul li img:hover{
    -webkit-transform:rotate(360deg) scale(1.2); 
    -moz-transform:rotate(360deg) scale(1.2);
    -ms-transform:rotate(360deg) scale(1.2);
    -o-transform:rotate(360deg) scale(1.2);
  }
  </style>
</head>

<body>

<div id="nav">
  <ul>
    <li><img src="data:images/1.png"/></li>
    <li><img src="data:images/2.png"/></li>
    <li><img src="data:images/3.png"/></li>
    <li><img src="data:images/4.png"/></li>
    <li><img src="data:images/5.png"/></li>
    <li class="mar"><img src="data:images/1.png"/></li>
    <li><img src="data:images/7.png"/></li>
    <li><img src="data:images/8.png"/></li>
    <li><img src="data:images/9.png"/></li>
    <li><img src="data:images/10.png"/></li>
    <li><img src="data:images/11.png"/></li>
    <li><img src="data:images/12.png"/></li>
    <li><img src="data:images/13.png"/></li>
    <li><img src="data:images/14.png"/></li>
  </ul>
</div>

</body>

</html>

css实现鼠标移上去变大,旋转,转别人的额的更多相关文章

  1. 用css 添加手状样式,鼠标移上去变小手,变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...

  2. 用css 添加手状样式,鼠标移上去变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...

  3. CSS: 首字母字体变大时下划线不对齐的解决方法

    昨天在写2017年百度ife任务六的时候遇到了一个排版问题,需要首字母字体变大的同时,下划线对齐. 首先使用了 ::first-letter伪元素的选择器,将字体变大后,发现下划线没法对齐,代码如下: ...

  4. 转:纯CSS实现“鼠标移过显示层”效果

    利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...

  5. css 添加手状样式,鼠标移上去变小手

    cursor:pointer, 简单实用. 前端工作一年多,竟然没有博客.说出来别人都要笑话,这是一个新的开始.

  6. ASP.NET 使用alert弹出对话框后,CSS样式失效,字体变大的解决方法

    protected void ASPxButton2_Click(object sender, EventArgs e) { //Response.Write("<script> ...

  7. CSS 居中 可随着浏览器变大变小而居中

    关键代码: 外部DIV使用: text-align:center; 内部DIV使用: margin-left:auto;margin-right:auto 例: <div style=" ...

  8. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  9. 代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...

随机推荐

  1. JS小技巧大本事(持续更新)

    1. 复制N个字符 String.prototype.repeat = function(num){ return (new Array(++num)).join(this); } var a = ' ...

  2. AngularJs 【使用】 -- ng-repart 排序使用

    1.单字段 ng-repeat="item in dataList | orderBy:'field' " 2.多字段 ng-repeat="item in dataLi ...

  3. 【PRO ASP.NE MVC4 学习札记】使用Moq辅助进行单元测试

    清楚问题所在: 先开个头,当我们对A进行单元测试时,可能会发现A的实现必须要依赖B.这时,我们在写单元测试时,就必须先创建B的实例,然后把B传给A再建立A的实例进行测试. 这样就会出现一些问题: 1. ...

  4. bzoj4306: 玩具厂

    Description 在JIH考察的地图中有N个城市,被公路依次连成了一个环,JIH想在这些城市中建一个玩具厂.城市和公路都被编号为1..N,i号公路连接i-1号城市与i号城市(1号公路连接N号城市 ...

  5. codeforces 235 B. Let's Play Osu!

    You're playing a game called Osu! Here's a simplified version of it. There are n clicks in a game. F ...

  6. iOS常见内存泄漏解决

    iOS常见内存泄漏解决     1 OC和CF转化出现的内存警告 CFStringRef cfString = CFURLCreateStringByAddingPercentEscapes(kCFA ...

  7. Fedora 19+ 启动顺序调整

    首先找到Windows 8的menuentry cat /boot/grub2/grub.cfg | grep Windows 设置Windows 作为默认的启动项 grub2-set-default ...

  8. JNA入门实例

    JNA(Java Native Access):建立在JNI之上的Java开源框架,SUN主导开发,用来调用C.C++代码,尤其是底层库文件(windows中叫dll文件,linux下是so[shar ...

  9. angular学习地址

    在网上收集了angular.js的网站,不错,收集收集 http://www.ituring.com.cn/minibook/303 http://www.zouyesheng.com/angular ...

  10. 动态树LCT

    #include<iostream> #include<cstdio> #include<cmath> #include<algorithm> usin ...