盒子模型 过渡与变形属性 课件 课件.pptx

任务14过渡与变形属性第五单元盒子模型 学习目标过渡（transition）属性掌握变形（transform）属性 任务目标实战演练——制作产品展示页强化训练——制作商品评论页 知识准备1. 过渡（transition）属性n 过渡（transition）属性：平滑地改变一个元素的CSS值，使得元素 从一个样式逐渐过渡到另一个样式。n 必须要规定两项内容：（1）应用过渡效果的CSS属性名称。（2）过渡效果所用的时长。n 语法规则：transition：property duration timing-function delay； 知识准备属性含义取值说明transition- property指定应用过渡效 果的CSS属性的 名称none没有属性会获得过渡效果。all默认值，所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。transition- duration定义过渡效果所 需花费的时间time值规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意 味着不会有效果。transition-timing- function指定过渡效果的 时间曲线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)）。cubic-bezier(n,n,n,n)在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。transition-delay定义过渡效果开 始之前的等待时 间time值指定秒或毫秒数，默认值是0。 示例：过渡属性style type=text/css.box {width: 60px; height: 60px;border: 70px solid #0F0;transition: 3s; /*transition属性写在初始状态 的样式中*/}.box:hover {border-radius: 50%;border-color:#F00; /*边框颜色为红色*/}/style知识准备bodydiv class=box/div/body 知识准备2. 变形（transform）属性n 变形（transform）属性：可以对元素进 行旋转、缩放、移动或倾斜，且支持2D 和3D转换。n 语法规则：transform：none | transform-functions； 知识准备transform-functions的常用2D转换函数函数名含义参数说明matrix(n,n,n,n,n,n)使用六个值的矩阵使用6个值表示变形。translate(x,y)沿着X和Y轴移动元素X表示左右方向，Y表示上下方向，向左 和向上为负数，反之为正数。translateX(n)沿着X轴移动元素translateY(n)沿着Y轴移动元素scale(x,y)改变元素的宽度和高度值表示缩放比例，取值可以是正数、负数和小数。scaleX(n)改变元素的宽度scaleY(n)改变元素的高度rotate(angle)旋转元素angle规定旋转角度。skew(x-angle,y-angle)沿着X和Y轴倾斜元素angle规定倾斜角度。skewX(angle)沿着X轴倾斜元素skewY(angle)沿着Y轴倾斜元素 transform: rotate(7deg);.rotate_right { float: left;transform: rotate(-8deg);/style/*顺时针旋转7度*/ }/*逆时针旋转8度*/ }知识准备示例：变形属性style type=text/css body {margin: 30px;background-color: #E9E9E9; font-family: 微软雅黑; } div {width: 294px;padding: 10px 10px 20px 10px; border: 1px solid #BFBFBF; background-color: white;box-shadow: 2px 2px 3px #aaaaaa; }.rotate_left { float: left;bodydiv class=rotate_leftimg src=im