本人是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. JDBC Tutorials: Commit or Rollback transaction in finally block

    http://skeletoncoder.blogspot.com/2006/10/jdbc-tutorials-commit-or-rollback.html JDBC Tutorials: Com ...

  2. 如何使用dos命令查看MySQL当前使用的数据库？

    1.dos命令安装mysqld --stall.启动net start mysql.进入MySQL数据库mysql -uroot -p后,输入select database(); 如图:

  3. Mysql - 增删改

    因为项目原因, mysql用了两年了, 但是一直都未曾去总结过. 最近也是领导让总结项目, 才想起把mysql的使用小结一下. 一. Create 1. 单条插入, sql格式: insert int ...

  4. [Hadoop in Action] 第7章 细则手册

    向任务传递定制参数 获取任务待定的信息 生成多个输出 与关系数据库交互 让输出做全局排序   1.向任务传递作业定制的参数        在编写Mapper和Reducer时,通常会想让一些地方可以配 ...

  5. wireshark 相关提示

    Packet size limited during capture      提示说明标记的包没有抓全,在某些操作系统中,默认只抓96个字节,tcpdump中有"-s"参数可用于 ...

  6. 12个小技巧，让你高效使用Eclipse

    集成开发环境(IDE)让应用开发更加容易.它们强调语法,让你知道是否你存在编译错误,在众多的其他事情中允许你单步调试代码.像所有的IDE一 样,Eclipse也有快捷键和小工具,这些会让您感觉轻松许多 ...

  7. Visual Studio Code 使用Git进行版本控制

    Visual Studio Code 使用Git进行版本控制 本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 所有中文教程,竟没有一个靠谱的.遂动笔写一篇. 请确保你 ...

  8. [Java面经]干货整理, Java面试题(覆盖Java基础,Java高级,JavaEE,数据库,设计模式等)

    如若转载请注明出处: http://www.cnblogs.com/wang-meng/p/5898837.html   谢谢.上一篇发了一个找工作的面经, 找工作不宜, 希望这一篇的内容能够帮助到大 ...

  9. 打印Lua的Table对象

    小伙伴们再也不用为打印lua的Table对象而苦恼了, 本人曾也苦恼过,哈哈 不过今天刚完成了这个东西, 以前在网上搜过打印table的脚本,但是都感觉很不理想,于是,自己造轮子了~ 打印的效果,自己 ...

  10. HTML中的拖拉框----在路上（29）

    拖拽框---当鼠标按在指定的区域才可进行拖拽 思想:只有当鼠标是按在一个大div里的小div才可拖拽,其他不可:拖拽框有多种方法,这里以其中一种分享:下面使我自己写的demo,简单有效. <!D ...