《web前端技术》课件-第八章 CSS3 高级应用.ppt

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 超链接 课堂练习 WEB （1）在 CSS3 中，使用下列哪些方法可以实现 3D 旋转变形（ ）。 A．rotateX( ) B．rotateY( ) C．rotateZ( ) D．rotate3d( ) （2）在 CSS3 中，使用 animation 属性可以在一个声明中设置动画效果的各个属性，其中，（ ）值必须设置，否则无法播放动画。 A．animation-name B．animation-duration C．animation-direction D．animation-timing-function 2. 多选题 ABCD AB 超链接 课堂练习 WEB （1）在 CSS3 中，3D 变形效果包括平移、缩放、旋转和倾斜。 （ ） （2）在 CSS3 中，使用 animation-fill-mode 属性设置动画效果播放外（如播放之前或之后）的状态。（ ） 3. 判断题 ? ? 超链接 课后实训 WEB 在 HBuilder X 中导入本书配套素材“素材与案例\第 8 章\实训练习\study”文件夹，然后打开“main.css”文档。按照以下要求修改文档，为页面侧边栏中的链接文字添加过渡效果，修改后“main.html”文档的页面效果如所示。 添加过渡效果后的页面效果 超链接 课后实训 WEB （1）为侧边栏中的链接文字（#aside_a a{…}）添加背景图像，图像文件为 img 文件夹中的“tip.png”，背景图像不重复，显示位置为“?5% 75%”。 （2）将鼠标指针移动至侧边栏中链接文字上时的背景图像显示位置设置为“26%75%”。 （3）为上一步中设置的样式变化添加时长为 0.5 秒的过渡效果。 超链接 具体实现效果与代码可参考“素材与案例\第 8 章\实训练习\study”项目中的“main（终）.html”文档与“main（终）.css”文档。 TISHI 提示 超链接 课后实训 WEB 谢谢 THANKS * * * * * * * * * * * * * * * * * * * * * * * * * * 8.2 2．设置过渡时间 过渡效果 属性值 说明 cubic-bezier(n,n,n,n) 贝塞尔曲线，用于精确设置过渡效果的速度曲线，n 的取值范围为 0～1 linear 线性过渡，即以相同速度开始至结束的过渡效果，等同于 cubic-bezier(0,0,1,1) ease 平滑过渡，即慢速开始，然后变快，然后慢速结束的过渡效果，等同于 cubic-bezier(0.25,0.1,0.25,1) ease-in 由慢到快，即慢速开始再逐渐加速的过渡效果，等同于 cubic-bezier(0.42,0,1,1) ease-out 由快到慢，即快速开始慢速结束的过渡效果，等同于 cubic-bezier(0,0,0.58,1) ease-in-out 由慢到快再到慢，即慢速开始再加速，然后慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1) 表 transition-timing-function 属性值及说明 超链接 贝塞尔曲线参数值的大小与速度效果的联系并不直观，直接设置参数值不一定能够得到期望的效果，所以设置贝塞尔曲线的参数值时，可以使用浏览器的开发者工具进行设置，下面介绍具体步骤。 步骤 1 此处以 Chrome 浏览器为例，使用该浏览器打开“素材与案例\第 8 章\function.html”文档，该文档中已经创建好添加了过渡效果的 div 元素。 XIAOJIQIAO 小技巧 8.2 过渡效果 超链接 步骤 2 按“F12”键打开“开发者工具”窗格，在“Elements”选项卡中单击 div元素的代码行，在下方的“Styles”选项卡中单击“:hov”所在区域，在展开的面板中勾选“:hover”复选框，改变 div 元素的状态，如图所示。 XIAOJIQIAO 小技巧 8.2 过渡效果 改变 div 元素的状态 超链接 步骤 3 再次单击“:hov”所在区域，收起面板。此时“Styles”选项卡中显示出div:hover{…}的代码，单击代码“ease”前的贝塞尔曲线按钮 ，打开贝塞尔曲线调节窗口，在窗口中移动曲线两侧的圆形控制点能够动态调节代码中的属性值，窗口上方的一行圆点轨迹表示过渡效果的速度，圆点间隔越大的时间点过渡速度越快，如图所示。 XIAOJIQIAO 小技巧 8.2