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 ...
随机推荐
- JS小技巧大本事(持续更新)
1. 复制N个字符 String.prototype.repeat = function(num){ return (new Array(++num)).join(this); } var a = ' ...
- AngularJs 【使用】 -- ng-repart 排序使用
1.单字段 ng-repeat="item in dataList | orderBy:'field' " 2.多字段 ng-repeat="item in dataLi ...
- 【PRO ASP.NE MVC4 学习札记】使用Moq辅助进行单元测试
清楚问题所在: 先开个头,当我们对A进行单元测试时,可能会发现A的实现必须要依赖B.这时,我们在写单元测试时,就必须先创建B的实例,然后把B传给A再建立A的实例进行测试. 这样就会出现一些问题: 1. ...
- bzoj4306: 玩具厂
Description 在JIH考察的地图中有N个城市,被公路依次连成了一个环,JIH想在这些城市中建一个玩具厂.城市和公路都被编号为1..N,i号公路连接i-1号城市与i号城市(1号公路连接N号城市 ...
- 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 ...
- iOS常见内存泄漏解决
iOS常见内存泄漏解决 1 OC和CF转化出现的内存警告 CFStringRef cfString = CFURLCreateStringByAddingPercentEscapes(kCFA ...
- Fedora 19+ 启动顺序调整
首先找到Windows 8的menuentry cat /boot/grub2/grub.cfg | grep Windows 设置Windows 作为默认的启动项 grub2-set-default ...
- JNA入门实例
JNA(Java Native Access):建立在JNI之上的Java开源框架,SUN主导开发,用来调用C.C++代码,尤其是底层库文件(windows中叫dll文件,linux下是so[shar ...
- angular学习地址
在网上收集了angular.js的网站,不错,收集收集 http://www.ituring.com.cn/minibook/303 http://www.zouyesheng.com/angular ...
- 动态树LCT
#include<iostream> #include<cstdio> #include<cmath> #include<algorithm> usin ...