第二版

0.环境准备

  (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了,

  -o- Opera

  -webkit- Safari、Chrome

  -moz- Firefox

  -ms- IE

  (2) css

  p

  {

    height:15px;/*类似于高度这种属性,必须明确指定值*/

    

  }

  p:hover/*初始p:hover*/

  {

    

    height:100px;

  }

  (3)html文件body部分

  <p></p>

1.快速使用

  将下面属性加入初始p:hover

  transition: background 2s linear 1s,height 1s linear 1s;

2.详解

  (1)分别指定、属性详解

  将下面属性加入初始p:hover

transition-property:height,background-color;

transition-duration:1s,2s;

transition-timing-function:linear;

transition-delay:1000ms,1s;

  transition-property 指定需要变化的属性

  不建议写成all,规则很难捉摸

transition-duration  height从执行到结束是1s,background-color从执行到结束是2s,height变化结束后,background-color变化结束还剩1s

只写一个值,则所有属性应用这个值,除此之外,请让transition-duration值的个数等于  transition-property值的个数

transition-timing-function:linear;变化的规律,这里请自行查找

只写一个值,则所有属性应用这个值,除此之外,请让transition-timing-function值的个数等于transition-property值的个数

transition-delay:1000ms,1s;height 1s后开始变化,这里background-color和height同时开始变化

只写一个值,则所有属性应用这个值,除此之外,请让transition-delay值的个数等于transition-property 值的个数

这些属性只能出现一次,否则后面的覆盖前面的

(2)综合使用

将下面属性加入初始p:hover

transition: background 2s linear 1s,height 1s linear 1s;

<transition-property><transition-duration><transition-timing-function><transition-delay>

<>可选参数,请全写

这些属性只能出现一次,否则后面的覆盖前面的

*transition和其他分着写的过渡属性也存在覆盖,后面覆盖前面的

CSS3过渡详解-遁地龙卷风的更多相关文章

  1. css3径向渐变详解-遁地龙卷风

    (-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...

  2. 转:【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  3. 第97天:CSS3渐变和过渡详解

    一.渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性. 可分为线性渐变.径向渐变 1. 线性渐变 (grad ...

  4. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  5. CSS3 动画及过渡详解

    今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...

  6. CSS3动画详解(超详细)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  7. CSS3动画详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  8. CSS3 HSL()详解:

    这是CSS3新增的颜色表示模式.在CSS2中,只有RGB(red.green和blue的缩写)和十六进制两种颜色模式.为了能够支持颜色的透明度,CSS3新增了RGBA(A是Alpha缩写).但是无论是 ...

  9. css3选择器详解

    css中除了早先最早的,ID选择器,class选择器一些以外在css3中新加入了新的选择器,新选择器的使用大大的方便了我们的编程,下面我就说一些css3的选择器的使用方法, p       选择了所有 ...

随机推荐

  1. EasyUI刚加载时候Window窗体自动弹出的解决办法

  2. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

  3. Lasso回归算法: 坐标轴下降法与最小角回归法小结

    前面的文章对线性回归做了一个小结,文章在这: 线性回归原理小结.里面对线程回归的正则化也做了一个初步的介绍.提到了线程回归的L2正则化-Ridge回归,以及线程回归的L1正则化-Lasso回归.但是对 ...

  4. JQuery EasyUI datagrid 复杂表头处理

    下面是我项目中和网上收集的EasyUI的表头处理的,合适的拿去用吧. 例子1: $('#day_health').datagrid({                 url: "sqb_b ...

  5. MySQL的分页优化

    今天下午,帮同事重写了一个MySQL SQL语句,该SQL语句涉及两张表,其中一张表是字典表(需返回一个字段),另一张表是业务表(本身就有150个字段,需全部返回),当然,字段的个数是否合理在这里不予 ...

  6. golang中的类和接口的使用

    类使用:实现一个people中有一个sayhi的方法调用功能,代码如下: type People struct { //.. } func (p *People) SayHi() { fmt.Prin ...

  7. CLR中的程序集加载

    CLR中的程序集加载 本次来讨论一下基于.net平台的CLR中的程序集加载的机制: [注:由于.net已经开源,可利用vs2015查看c#源码的具体实现] 在运行时,JIT编译器利用程序集的TypeR ...

  8. Android开发中的menu菜单

    复写onCreateOptionsMenu方法,当点击menu菜单时,调用该方法. @Override public boolean onCreateOptionsMenu(Menu menu) { ...

  9. Eclipse与Android源码中ProGuard工具的使用

    由于工作需要,这两天和同事在研究android下面的ProGuard工具的使用,通过查看android官网对该工具的介绍以及网络上其它相关资料,再加上自己的亲手实践,算是有了一个基本了解.下面将自己的 ...

  10. VMware Workstation 10.0 正式版官方简体中文下载(附序列号)

    虚拟机界数一数二的王者软件VMWare Workstation 今日推出了最新的VMware Workstation 10.0 版本.该版本最大的更新是加入了简体中文语言,这意味着未来神马汉化包.中文 ...