本人是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. C# 对象实例化 用json保存 泛型类 可以很方便的保存程序设置

    参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...

  2. Android Butterknife 8.4.0 使用方法总结

    转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/6016341.html 本文出自[赵彦军的博客] 前言 ButterKnife 简介 ButterKnife是 ...

  3. 敏捷转型历程 - Sprint3 回顾会

    我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...

  4. jquery.multiselect 多选下拉框实现

    第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...

  5. ExtJS 项目准备工作（一）

    首先,需要从网上下载两个文件,一个是SenchaCmd-6.2.0-windows-64bit(我的电脑是window 10 64位) 另一个是ExtJs6的源码包(ext-6.0.0.415). 源 ...

  6. Josephus环类问题，java实现

    写出一个双向的循环链表,弄一个计数器,我定义的是到三的时候,自动删除当前节点,很简单. package Com; import java.util.Scanner; /* * 约瑟夫环问题,有n个人组 ...

  7. 使用CocosSharp制作一个游戏 - CocosSharp中文教程

    注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了G ...

  8. C#与C++的发展历程第一 - 由C#3.0起

    俗话说学以致用,本系列的出发点就在于总结C#和C++的一些新特性,并给出实例说明这些新特性的使用场景.前几篇文章将以C#的新特性为纲领,并同时介绍C++中相似的功能的新特性,最后一篇文章将总结之前几篇 ...

  9. 架构之路（九）Session Per Request

    前面的两篇反应很差:没评论没赞.很伤心啊,为什么呢?搞得我好长一段时间都没更新了——呵呵,好吧,我承认,这只是我的借口.不过,还是希望大家多给反馈.没有反馈,我就只能猜了:前面两篇是不是写得太“粗”了 ...

  10. 架构设计：一种远程调用服务的设计构思（zookeeper的一种应用实践）

    在深入学习zookeeper我想先给大家介绍一个和zookeeper相关的应用实例,我把这个实例命名为远程调用服务.通过对这种应用实例的描述,我们会对zookeeper应用场景会有深入的了解. 远程调 ...