本人是HTML5-CSS3初学者，这次分享一款纯CSS3实现的图片动画，当鼠标滑过小图标时，图标会放大，同时图标会出现旋转的动画效果。我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就是利用这种方法实现的。由于只用到CSS3，所以实现的代码比较简单。

//附上代码

<!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>

源码下载

CSS3鼠标滑过图标放大以及旋转的更多相关文章

  1. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  2. 基于CSS3鼠标滑过放大突出效果

    还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...

  3. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  4. 简单的CSS3鼠标滑过图片标题和遮罩层动画特效

    此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有!   这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...

  5. CSS3鼠标滑过图片3D旋转动画

    在线演示       本地下载

  6. JS过渡和变形效果演示(举例:鼠标滑过图片放大) --JS案例

    1.代码: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title ...

  7. CSS3 鼠标划上图片放大

    td img{transition: all 1s}/*鼠标划上,图片1s全部显示完成*/ td img:hover{ transform: scale(5) translateX(50%) tran ...

  8. html5/CSS3鼠标滑过图片特效插件

    在线演示 本地下载

  9. HTML5/CSS3鼠标滑过图片滤镜动画效果

    在线演示 本地下载

随机推荐

  1. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  2. java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis

    A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:313596790freemaker模版技术 ,0个代码不用写 ...

  3. InnoDB：Lock & Transaction

    InnoDB 是一个支持事务的Engine,要保证事务ACID,必然会用到Lock.就像在Java编程一下,要保证数据的线程安全性,必然会用到Lock.了解Lock,Transaction可以帮助sq ...

  4. Unity C#最佳实践（上）

    本文为<effective c#>的读书笔记,此书类似于大名鼎鼎的<effective c++>,是入门后提高水平的进阶读物,此书提出了50个改进c#代码的原则,但是由于主要针 ...

  5. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  6. 虚拟机体验之 QEMU 篇

    引言 说起虚拟机,大家都不陌生.需要使用虚拟机的场景也非常的多,比如有志于写操作系统的同志,往往需要一个虚拟机来运行和调试他写的系统:再比如喜欢研究网络体系结构的朋友,需要在自己的电脑上虚拟出 N 个 ...

  7. 2000条你应知的WPF小姿势 基础篇<8-14>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  8. Entity Framework 6 Recipes 2nd Edition（13-2）译 -> 用实体键获取一个单独的实体

    问题 不管你用DBFirst,ModelFirst或是CodeFirst的方式,你想用实体键获取一个单独的实体.在本例中,我们用CodeFirst的方式. 解决方案 假设你有一个模型表示一个Paint ...

  9. Java-jdbc操作数据库

    如果需要访问数据库,首先要加载数据库驱动,数据库驱动只需在第一次访问数据库时加载一次.然后在每次访问数据库时创建一个Connection实例,获取数据连接,这样就可以执行操作数据库的SQL语句.最后在 ...

  10. Fiddler--一、HTTP协议简介

    在学习Fiddler之前,最好先学习一下HTTP协议. HTTP协议简介 什么是HTTP协议 超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端 ...