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. poj 1401---求N!末尾0的个数,2的个数一定比5多,观察得来,0的产生即为2*5,去找这个阶乘一行里面5的个数即可

    #include<stdio.h> #include<stdlib.h> int main() { int T,N; while(scanf("%d",&a ...

  2. 怎样学习使用libiconv库

    怎样学习使用libiconv库 - My Study My Study About My Learn or Study etc. 怎样学习使用libiconv库 By Cnangel on Febru ...

  3. python导入模块的方法

    先看代码: import time #利用import print "how", time.sleep(2) #sleep()方法前面必须得有导入模块的名字time print & ...

  4. Android中对闹钟Alarm的事件处理

    之前的博文一直在持续分享Phone相关的知识也算是知识笔记,但在工作中难免遇到其他模块的一些问题,因此在解决这些问题的时候顺手将这些知识记录并分享出来.有些知识在不知道的时候会觉得非常难,当了解之后便 ...

  5. Haffman算法(C++)

    Huffman编码,C++实现,只是为了说明大致的思路,还有很多不完美之处,比如在输入数据超出限制等条件下会出现错误. #include<iostream> #include<str ...

  6. HTML5 元素拖放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. SQL中去除某字段中的某个字符语法

    update S_ENTERPRISE set DAY_PROCESS=replace(DAY_PROCESS,'吨','') where DAY_PROCESS like '%吨%'

  8. iOS进阶:Objective-C runtime(一)

    第一次看到runtime时,觉得太高大上,动态获取方法.属性等简直厉害的不要不要的.在经过查找资料+实践后,发现runtime并没有想象中那么复杂,接下来对runtime进行基本的介绍. 要使用运行时 ...

  9. Java学习之finally关键字总结

    Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使 ...

  10. Java提高学习之Object(3)

    终止 问: finalize()方法是用来做什么的? 答: finalize()方法可以被子类对象所覆盖,然后作为一个终结者,当GC被调用的时候完成最后的清理工作(例如释放系统资源之类).这就是终止. ...