css实现鼠标移上去变大,旋转,转别人的额
<!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实现鼠标移上去变大,旋转,转别人的额的更多相关文章
- 用css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...
- 用css 添加手状样式,鼠标移上去变小手
用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...
- CSS: 首字母字体变大时下划线不对齐的解决方法
昨天在写2017年百度ife任务六的时候遇到了一个排版问题,需要首字母字体变大的同时,下划线对齐. 首先使用了 ::first-letter伪元素的选择器,将字体变大后,发现下划线没法对齐,代码如下: ...
- 转:纯CSS实现“鼠标移过显示层”效果
利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...
- css 添加手状样式,鼠标移上去变小手
cursor:pointer, 简单实用. 前端工作一年多,竟然没有博客.说出来别人都要笑话,这是一个新的开始.
- ASP.NET 使用alert弹出对话框后,CSS样式失效,字体变大的解决方法
protected void ASPxButton2_Click(object sender, EventArgs e) { //Response.Write("<script> ...
- CSS 居中 可随着浏览器变大变小而居中
关键代码: 外部DIV使用: text-align:center; 内部DIV使用: margin-left:auto;margin-right:auto 例: <div style=" ...
- 点击图片或者鼠标放上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 ...
- 代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...
随机推荐
- PHP迭代器
在所有语言中,所有迭代器都必须具有如下4想功能: 1.回滚迭代器到第一个元素 2.潜行到下一个元素 3.获取当前元素 4.验证是否到最后一个元素了 在PHP中我我们可以通过实现iterator来实现迭 ...
- Thinkphp 验证码、文件上传
一.验证码 验证码参数 例题:登录时验证下验证码 LoginController.class.php <?php namespace Home\Controller; use Think\Con ...
- JQUERY1.9学习笔记 之基本过滤器(九) 小于选择器
小于选择器 jQuery( ":lt(index)" ) jQuery( ":lt(-index)" ) 描述:选择所有小于指定下标的元素. <!DOCT ...
- UVA - 11346 Probability (概率)
Description Probability Time Limit: 1 sec Memory Limit: 16MB Consider rectangular coordinate system ...
- HDU 2955(01背包问题)
M - 01背包 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descript ...
- linux c数据库备份第二版
#想知道更多请查看第一版"linux c数据库备份第一版" #include<sys/types.h> #include<sys/wait.h> #incl ...
- TCP回射客户程序:main函数
创建套接字,装填网际网套接字地址结构 创建一个TCP套接字,用服务器的IP地址和端口号装填一个网际网套接字地址结构 我们可从命令行参数取得服务器的IP地址 从头文件unp.h取得服务器的众所周知端口号 ...
- Linux的时钟管理
本文转自博客园zhenwenxian的Linux时间管理,很详细,写得很不错,对初学者还是有很大帮助的. 时间管理在内核中占有非常重要的地位.相对于事件驱动,内核中有大量的函数都是基于时间驱动的.内核 ...
- 转:Google论文之一----Bigtable学习翻译
文章来自于:http://www.cnblogs.com/geekma/archive/2013/05/30/3108391.html Bigtable研究 摘要 Bigtable是一个用于管理结构型 ...
- jquery-te 轻量级的编辑器