<!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. FindBugs的Eclipse插件安装与使用

    1.FindBugs介绍 FindBugs是一款Java静态代码分析工具,与其他静态分析工具(如Checkstyle和PMD)不同,FindBugs 不注重样式或者格式,它专注于寻找真正的缺陷或者潜在 ...

  2. C# FTP操作

    using System; using System.Collections.Generic; using System.Net; using System.IO; namespace FTP操作 { ...

  3. 说一说&&符

    今天添加检测代码,还得添加好几套,好蛋疼. 为了省点事,全写在HTML的行间onclick里,为此专门琢磨了一下&&的用法. 一般用&&(除了逻辑判断里),是为了简写i ...

  4. MVC中的HtmlHelper

    authour: chenboyi updatetime: 2015-04-27 21:57:17 friendly link:   目录: 1,思维导图 2,CodeSimple 1.思维导图:

  5. php通过curl实现bigpipe

    BigPipe是facebook发明的一种页面加载技术.其实也不是什么新技术了,也有很多文章进行说明.但是在网上,具体讲如何使用php实现bigpipe的文章很少,并且有些文章还不很准确.bigpip ...

  6. 【Oracle】ORACLE SQL Developer不支持JAVA版本

    ORACLE SQL Developer不支持JAVA版本 今天我打开 ORACLE SQL Developer准备开始练手.没有想到却给出了错误提示. 我 是安装了java JDK的而且是1.6版本 ...

  7. Windows提供了两种将DLL映像到进程地址空间的方法（隐式和显式）

    调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法: 1. 隐式的加载 ...

  8. Intention Locks 意向锁

    Intention Locks 意向锁 InnoDB 支持多颗粒度锁定允许row-level locks和锁整个表共存. 为了使锁在多个颗粒级别实现, 额外类型的锁被称为意向锁是被使用. . Inte ...

  9. CentOS 启动提示unexpected inconsistency;RUN fsck MANUALLY

    CentOS这两天服务器出了问题了,提示如下: unexpected inconsistency;RUN fsck MANUALLY An error occurred during the file ...

  10. CSS伪元素before和after

    今天发现很多国外的网站和框架设计都用到了before和after,之前使用的比较少,今天试了下觉得还是很有意思的~ 说明 1. :before 和 :after将在内容元素的前后插入额外的元素::be ...