博客
关于我
css3 过渡
阅读量:207 次
发布时间:2019-02-28

本文共 2305 字,大约阅读时间需要 7 分钟。

通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点,必须规定两项内容:1.规定希望把效果添加到哪个 CSS 属性上,2.规定效果的时长

1.语法:

transition: property duration timing-function delay;

2.参数说明:
  1. transition-property:规定设置过渡效果的css属性名称
  2. transition-duration:规定过渡效果需要多少秒或毫秒
  3. transition-timing-function:规定过渡效果的过渡曲线
  4. transition-delay:定义过渡效果何时开始
3.transition-timing-function值:
  1. linear:规定以相同速度(匀速)开始至结束的过渡效果
  2. ease:慢速开始 然后变快 然后慢速结束
  3. ease-in:慢速开始
  4. ease-out:慢速结束
  5. ease-in-out:慢速开始和结束
  6. cubic-bezier(n,n,n):在cubic-bezier(n,n,n)函数中定义自己的值(可能的值是0到1之间的数值)
4.案例说明
div{       width: 200px;    height: 200px;    background-color: red;    /*添加单个过渡效果*/    /*transition:background-color 2s;*/    /*也可以同时设置多个过渡效果*/    /*transition:background-color 2s,left 1s;*/    /*可以设置某个过渡效果的延迟*/    /*transition:background-color 2s,left 1s 1s;*/    /*可以设置过渡效果的速率曲线*/    /*transition:background-color 2s,left 1s ease-out 1s;*/    /*还可以一次性的为所有属性添加过渡效果(不建议这样使用)*/    transition:all 1s;    position: absolute;    left: 0;    top: 0;}
5.为多个样式添加过渡效果
transition:left 1s,color 2s;
6.让过渡效果分为指定的几步来完成
transition:left 1s steps(4);
7.浏览器兼容

因为transition最早是有由webkit内核浏览器提出来的,mozilla和opera都是最近版本才支持这个属性,而我们的大众型浏览器IE全家都是不支持,另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法,所以在应用transition时我们有必要加上各自的前缀,最好在放上我们W3C的标准写法,这样标准的会覆盖前面的写法,只要浏览器支持我们的transition属性,那么这种效果就会自动加上去,如

-moz-transition: all 5s ease 1s;-webkit-transition: all 1s ease 1s;-o-transition: all 1s ease 1s;transition: all 1s ease 1s;
8.手风琴案例

鼠标放到标题栏,下方对应的内容区域展开,并带有过渡效果。

鼠标离开内容区域关闭,并带有过渡效果
- 插入图片

代码:

  
Document

1

1111111111111111111111111111111111111111 1111111111111111111111111111111111111111 11111111111

2

2222222222222222222222222222222222222222 2222222222222222222222222222222222222222 2222222222222222222222222

3

3333333333333333333333333333333333333333 3333333333333333333333333333333333333333 33333333333333333333333333333333333

4

4444444444444444444444444444444444444444 4444444444444444444444444444444444444444 4444444444444444444444444444444444444444
web前端交流QQ群:327814892

转载地址:http://cxri.baihongyu.com/

你可能感兴趣的文章
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>
Mysql中的 IFNULL 函数的详解
查看>>
mysql中的collate关键字是什么意思?
查看>>
MySql中的concat()相关函数
查看>>