第13章 CSS动画与3D-【好程序员成长】HTML5从入门到精通

CSS3过渡 CSS3变形 CSS3动画 CSS3之3D 第13章 CSS3动画与3D CSS3过渡 CSS3变形 CSS3动画 CSS3之3D 目 录 CATALOUGUE 01 02 04 03 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 掌握CSS3高级特性 理解CSS3之3D 熟悉CSS3变形 了解CSS3运动相关样式 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 13.1 CSS3过渡 13.1.1 transition属性 13.1.2 cubic-bezier属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 首先看一个实例，当鼠标移入方块时，触发hover伪类，实现样式的变化。 13.1 CSS3过渡 13.1.1 transition属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn transition属性是一个复合属性，主要包含4个子属性，下面将依次进行介绍。 1.transition-duration属性 transition-duration属性表示过渡的持续时间，单位可以设置成s（秒）或ms（毫秒）。 13.1 CSS3过渡 13.1.1 transition属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 2.transition-property transition-property属性表示对元素的哪一个属性进行过渡操作。默认情况下所有的值会同时变化，如前面的hover效果，可以看到宽、高、背景色都发生了过渡效果。 13.1 CSS3过渡 13.1.1 transition属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.transition-delay transition-delay属性表示执行过渡效果的延迟时间。单位同样是s（秒）或ms（毫秒）。在复合样式transition中设置两个时间时，前面的时间表示过渡时间，后面的时间表示延迟时间。 13.1 CSS3过渡 13.1.1 transition属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.transition-timing-function transition-timing-function属性表示过渡的形式。主要有linear、ease（默认值）、ease-in、ease-out 、ease-in-out四个值。 13.1 CSS3过渡 13.1.1 transition属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.transition-timing-function 除了简单的过渡形式外，transition属性还提供了cubic-bezier值（贝塞尔曲线）。贝塞尔曲线是应用于二维图形应用程序的数学曲线。可以通过http://cubic-bezier.com（贝塞尔官网，如图所示）来获取想要设置的样式。 13.1 CSS3过渡 13.1.2 cubic-bezier属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 13.1 CSS3过渡 13.1.2 cubic-bezier属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 13.2 CSS3变形 13.2.1 transform属性 13.2.2 transform-origin属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 在CSS3中，可以使用transform属性来实现文字或图像的的各种变形效果，如位移、缩放、旋转、斜切等。 1.translate() translate()方法表示元素位移的操作方法，在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。translate方法与relative（相对定位）相似，元素位置的改变不会影响到其他元素。对于位移translate()方法可分为三种情况。具体如表所示。 13.2 CSS3变形 13.2.1 transform属性 translate()方法 描述 translateX(x) 元素仅在水平方向移动（X轴移动），0点坐标相对于自身位置 translateY(y) 元素仅在垂直方向移动（Y轴移动）, 0点坐标相对于自身位置 translate(x,y) 元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动） 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 2.