1、鼠标放在圆形图片中,图片渐渐的变方形【17素材头像的特效,觉得不错就研究下来了 ———— 17sucai.com】

img{border-radius:50%;transition: all .4s ease-out;}

a:hover img{border-radius:0px;}

2、当鼠标放到菜单或者图片上时,菜单或图片会渐渐的移动  【忘记在哪看的了,不过效果确实很不错】

a{transition:all 0.3s ease-out 0s;color:#000;}

a:hover{margin-left:5px; text-decoration:none;}

3、当鼠标放到图片上,图片会旋转一定的角度,【类似天猫首页右侧的便民服务,其实原理就是相同的背景图片】

i{        background: url(../images/lobg.png) no-repeat; width:30px; height:30px;}

i:hover{         background-position: 0 -30px;       transition: all .4s ease-out;}

现在网页中流行的css3样式的更多相关文章

  1. 修复Telerik reporting 在网页中使用时的样式

    在ASP.NET 网页或ASP MVC中嵌入Telerik Reporting时,报表出来的样式是有问题的,按扭的位置错位了. 在页面中引入以下CSS文件可以将报表样式修复从而回到正常的报表样式. . ...

  2. 【原】ZenCoding中常用的CSS3样式

    用ZenCoding这么久了,总结下常用CSS3的写法,方便以后查找: Property Alias @media print {} @m box-sizing:border-box; bxz:bb ...

  3. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  4. php部分:网页中报表的打印,并用CSS样式控制打印的部分;

    网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...

  5. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  6. Ifvisible.js – 判断网页中的用户是闲置还是活动状态

    ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...

  7. 网页中导入特殊字体@font-face属性详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...

  8. CSS网页中导入特殊字体@font-face属性详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...

  9. 1. svg学习笔记-在网页中使用svg

    在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...

随机推荐

  1. 【原】win7下调整分区

    由于装系统时硬盘分区极度不合理,导致现在装一些比较大的开发软件根本不能装,但是又不想重装系统调整分区,而且还不想让已有的文件受到一点伤害,毕竟数据无价啊.几番搜索后,发现了一款比较好用的硬盘管理软件  ...

  2. CSS制作出绚丽燃烧的火狐狸

    From here:http://www.webhek.com/firefox-animation/ ozilla在移动世界大会上宣布它的火狐操作系统(Firefox OS)的同时,也宣布了它的合作伙 ...

  3. Git与SVN的比较及优点

    前天处女面被问到了你为什么要用Git而不用SVN,答的不是很理想,正好今天晚上小组内部进行了Git使用的培训,便想着总结一下Git与SVN的差异以及Git的优点. 一.Git与SVN的比较 1.git ...

  4. aix 小机运维

    zzbank 一个月折腾总结小总结:#+++++++++++++++++++++++++++++++++++++++++++++++++++++++++#+    Ruiy-ge;#+#+    Te ...

  5. aix创建lv 在lv上创建文件系统

    创建LV命令: mklv -y softlv -t jfs2 rootvg 15G 创建文件系统命令: crfs -v jfs2 -d/dev/softlv -m /soft -A yes 把soft ...

  6. JQuery日记6.9 Promise/A之Callbacks

    JQuery并没有简单的使用一个Array来存储回调函数,而是通过JQuery.Callbacks(options)返回一个self对象,此对象能够动态的add,remove和fire回调函数队列.此 ...

  7. SVN 权限配置具体说明

    svnserve权限配置 分配权限时.文件夹应该应该遵从从大到小,权限应该从小到大的规则 即:文件夹从根文件夹開始,权限从没有权限(为空就可以)到可写再到可读写. 提示:文件夹的訪问权限既能够分配给组 ...

  8. bootstrap-js(2)下拉菜单

    1.下面的实例演示了在导航栏内和标签内的下拉菜单的用法: <!DOCTYPE HTML><html><head><link href="/style ...

  9. Intellij Idea的一些配置

    1.字体 修改IDEA面板字体:Settings->Appearance-> Override default fonts by(not recommended)选中,选择自己喜欢的字体 ...

  10. kafka 使用、介绍

    kafka  是一个消息系统, 具体资料可以参考官网: BrokerKafka集群包含一个或多个服务器,这种服务器被称为broker Topic每条发布到Kafka集群的消息都有一个类别,这个类别被称 ...