过渡课堂笔记

过渡

一,什么是过渡(transition)?

1,transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。

2,可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。

二,常用属性;

1,transition 属性主要包含四个属性值:

1),用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果;

2),transition-duration -- 定义过渡效果花费的时间,默认是 0;

3),transition-timing-function -- 允许根据时间的推进去改变属性值的变换速率,

transition-timing-function有6个可能值:

a、ease:(逐渐变慢)默认值

b、linear:(匀速),linear

c、ease-in:(加速)

d、ease-out:(减速),

e、ease-in-out:(加速然后减速)

f、cubic-bezier:(该值允许你去自定义一个时间曲线)特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

4),transition-delay -- 用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,默认是 0。

5),transition -- 简写属性,用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。

如:transition: <property> <duration> <animation type> <delay>如备课文件夹所示:

时间: 2024-10-17 12:41:00

过渡课堂笔记的相关文章

2017年5月24号课堂笔记

2017年5月24号 星期三 晴 空气质量:优 内容:定位属性,CSS3动画  备注:5月25日补课堂笔记 一.定位属性  01.定位属性 仿写老师代码: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>定位属性</title> <!-- position:定位属性 属性值: 01.static:默认值

九章算法系列(#2 Binary Search)-课堂笔记

前言 先说一些题外的东西吧.受到春跃大神的影响和启发,推荐了这个算法公开课给我,晚上睡觉前点开一看发现课还有两天要开始,本着要好好系统地学习一下算法,于是就爬起来拉上两个小伙伴组团报名了.今天听了第一节课,说真的很实用,特别是对于我这种算法不扎实,并且又想找工作,提高自己的情况. 那就不多说废话了,以后每周都写个总结吧,就趁着这一个月好好把算法提高一下.具体就从:课堂笔记.leetcode和lintcode相关习题.hdu和poj相关习题三个方面来写吧.希望自己能够坚持下来,给大家分享一些好的东

2017年5月12号课堂笔记

2017年5月12号 星期五 空气质量:轻度污染(昨天的北风转今天的南风) 内容:html表格的基本使用,表格跨行跨列,高级表格,播放音乐,播放视频,网页布局,iframe内联框架: 文本框,密码框,单选按钮,复选框,下拉框  备注:周日晚想起来补上的周五课堂笔记(一带一路今天开会天气好晴朗) 一.html表格的基本使用 模仿老师代码: <!DOCTYPE html><html><head lang="en"> <meta charset=&q

?统计学习精要(The Elements of Statistical Learning)?课堂笔记(一)

前两天微博上转出来的,复旦计算机学院的吴立德吴老师在开?统计学习精要(The Elements of Statistical Learning)?这门课,还在张江...大牛的课怎能错过,果断请假去蹭课...为了减轻心理压力,还拉了一帮同事一起去听,eBay浩浩荡荡的十几人杀过去好不壮观!总感觉我们的人有超过复旦本身学生的阵势,五六十人的教室坐的满满当当,壮观啊. 这本书正好前阵子一直在看,所以才会屁颠屁颠的跑过去听.确实是一本深入浅出讲data mining models的好书.作者网站上提供免

?统计学习精要(The Elements of Statistical Learning)?课堂笔记(三)

照例文章第一段跑题,先附上个段子(转载的哦~): I hate CS people. They don't know linear algebra but want to teach projective geometry. They don't know any probability but want to use graphical models. They don't understand stats at all but still do machine learning like c

线程(java课堂笔记)

1.两种方式的差异 2.线程的生命周期 3.线程控制(线程的方法) 4.线程同步 5.线程同步锁 一. 两种方式的差异 A extends Thread :简单 不能再继承其他类了(Java单继承)同份资源不共享 B implements Runnable:( 推荐) )多个线程共享一个目标资源,适合多线程处理同一份资源. 该类还可以继承其他类,也可以实现其他接口. 二. 线程的生命周期 新建:当程序使用new创建一个线程后,该线程处于新建状态,此时他和其他java对象一样,仅仅由Java虚拟机

CSS基础入门 第4天课堂笔记

CSS基础入门 第4天课堂笔记(本课程共6天) 前端与移动开发学院 http://web.itcast.cn 目录 目录 2 一.复习 3 二.浮动性质的复习 4 三.浮动的清除 5 3.1 清除浮动方法1:给浮动的元素的祖先元素加高度. 5 3.2 清除浮动方法2:clear:both; 6 3.3 清除浮动方法3:隔墙法 7 3.4 清除浮动方法4:overflow:hidden; 8 3.5 清除浮动总结与案例 9 3.6 浏览器兼容问题 11 四.margin 13 4.1 margin

SQL课堂笔记

--注释 公司里一般而是用绝不重复的guid()做主键(web项目不常用) 如null参与运算,结果都是null 在数据库中创建索引能提高查询效率,)只在经常要检索的字段创建索引) sql查询null的数据 selsct * from table where name is null 查询年龄介于20到30的数据 selsct * from table where age between 20 and 30 查询年龄是20,22,32,46的数据 selsct * from table wher

JAVA的面向对象编程--------课堂笔记

JAVA的面向对象编程--------课堂笔记 面向对象主要针对面向过程. 面向过程的基本单元是函数.   什么是对象:EVERYTHING IS OBJECT(万物皆对象)   所有的事物都有两个方面: 有什么(属性):用来描述对象. 能够做什么(方法):告诉外界对象有那些功能. 后者以前者为基础. 大的对象的属性也可以是一个对象.   为什么要使用面向对象: 首先,面向对象符合人类看待事物的一般规律. 对象的方法的实现细节是屏蔽的,只有对象方法的实现者了解细节. 方法的定义非常重要.方法有参