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. css案例学习之父子块的margin

    两边还会有些距离,这是body默认的. 代码: <head> <title>父子块的margin</title> <style type="text ...

  2. hdu 2769 uva 12169 Disgruntled Judge 拓展欧几里德

    //数据是有多水 连 10^10的枚举都能过 关于拓展欧几里德:大概就是x1=y2,y1=x2-[a/b]y2,按这个规律递归到gcd(a,0)的形式,此时公因数为a,方程也变为a*x+0*y=gcd ...

  3. android 网络状态判断【转】

    import java.net.InetAddress; import android.app.Activity;import android.content.Context;import andro ...

  4. 批处理就是windows的杰作啊

    今天要为了解决vs不能同时开启调试和编写的问题,我就上网查找了一些批处理的命令,用批处理调用exe,和打开txt,虽然一行代码就解决了但是我没用过啊,很陌生. call  路径\a.exe  就相当于 ...

  5. bootstarp栅格系统

    ##### 1.3.2 栅格系统 - Bootstrap中定义了一套响应式的网格系统,- 其使用方式就是将一个容器划分成12列,- 然后通过col-xx-xx的类名控制每一列的占比 ##### 1.3 ...

  6. PHP 提交checkbox表单时 判断复选框是否被选中

    function GetTitleImgPath(){ $titleImgPath = ""; if (isset($_POST["titlecheckbox" ...

  7. OC语法4——自定义构造方法,description方法

    自定义构造方法: 我们已经知道创建对象分两步,1:在内存中开辟存储空间,并把地址存储在指针变量里,2:调用指针变量的初始化方法init初始化该对象. Student * stu = [Student ...

  8. Properties读写资源文件

    Java中读写资源文件最重要的类是Properties,功能大致如下: 1. 读写Properties文件 2. 读写XML文件 3. 不仅可以读写上述两类文件,还可以读写其它格式文件如txt等,只要 ...

  9. 在struts2中整合ajax时出现Template /template/ajax/head.ftl not found错误时的处理方法

    Struts2 Ajax出现错误“Template /template/ajax/head.ftl not found” 2013-02-08 18:26:27|  分类: 默认分类|字号 订阅   ...

  10. CSS3 Pie工具可以让IE6至IE8版本实现大多数的CSS3修饰特性,如圆角、阴影、渐变等

    css3 pie使用方法: <!doctype html> <html lang="en"> <head> <meta charset=& ...