css实现鼠标移上去变大，旋转，转别人的额

时间：2022-03-07 09:33:53

<!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 添加手状样式&comma;鼠标移上去变小手&comma;变小手

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

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

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

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

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

  4. 转：纯CSS实现&OpenCurlyDoubleQuote;鼠标移过显示层”效果

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

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

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

  6. ASP&period;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=&quot ...

  8. 点击图片或者鼠标放上hover &period;图片变大&period; 1&rpar;可以使用css中的transition&comma; transform 2&rpar; 预先设置一个 弹出div&period; 3&rpar;弹出层 alert &semi; 4&rpar; 浏览器的宽度document&period;documentElement&period;clientWidth &vert;&vert; document&period;body&period;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. MAC 如何使用Github Desktop 客户端

    作为开源代码库以及版本控制系统,Github拥有140多万开发者用户.随着越来越多的应用程序转移到了云上,Github已经成为了管理软件开发以及发现已有代码的首选方法.GitHub上已自动配置的Mac ...

  2. 阿里云CDN刷新预热接口

    阿里云OSS映射的文件地址需要即时访问到最新数据,需要即时调用CDN的刷新预热类接口 RefreshObjectCaches 刷新接口. 参考官方接口文档资料:https://help.aliyun. ...

  3. 智能硬件&plus;App移动新生态【11&period;01深圳】

    活动概况 时间:2015年11月01日13:30-16:30 地点:深圳腾讯大厦(南山区科技园科技中一路)2楼多功能厅 主办:APICloud.庆科.信鸽 费用:免费 活动背景 智能电视.智能汽车.智 ...

  4. Zipper&lowbar;DP

    Description Given three strings, you are to determine whether the third string can be formed by comb ...

  5. android102 查询，插入联系人

    package com.itheima.getcontacts; import com.itheima.getcontacts.domain.Contact; import android.net.U ...

  6. 直流电机驱动PWM频率（转）

    源:直流电机驱动PWM频率 1.没有统一的标准,其实PWM的频率和你的电机感抗和你需要的速度响应时间有很大的关系.一般的电机用14K就足够了.当然自需要简单的调速可以随便选. 如果电机转速比较高,感抗 ...

  7. Zabbix实战-简易教程--技巧一（操作类技巧）

    一.常用操作技巧 1.克隆 监控项.模板.触发器都可以进行克隆.其中,模板克隆又分为克隆和完全克隆.完全克隆会将LLD也一起复制一份,就是和之前的模板一模一样,而模板的克隆只是克隆监控项,不复制低层次 ...

  8. WPF 实现新手指引功能 DEMO

    需求 1.接口化.其他人实现接口就行 2.动态定位到visualTree中任意控件位置,即随意只显示任何部位 3.指示文本控件和箭头控件随意更改(位置,大小,高度,偏移等基本属性) 4.抽出主题 [d ...

  9. Cocos2D&colon;塔防游戏制作之旅&lpar;十&rpar;

    最终,draw方法显示这些路径点被放置在哪里,并且绘制出路径点之间的连线,它们仅仅被用作调试.一个成品游戏不应该绘制敌人的路径 - 那对于玩家来说太过容易了! 创建路径点的列表.打开HelloWorl ...

  10. &lbrack;Swift&rsqb;LeetCode889&period; 根据前序和后序遍历构造二叉树 &vert; Construct Binary Tree from Preorder and Postorder Traversal

    Return any binary tree that matches the given preorder and postorder traversals. Values in the trave ...

相关文章