盒子模型 过渡与变形属性 课件 课件_第1页
盒子模型 过渡与变形属性 课件 课件_第2页
盒子模型 过渡与变形属性 课件 课件_第3页
盒子模型 过渡与变形属性 课件 课件_第4页
盒子模型 过渡与变形属性 课件 课件_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务14过渡与变形属性第五单元盒子模型学习目标过渡（transition）属性掌握变形（transform）属性任务目标实战演练——制作产品展示页强化训练——制作商品评论页知识准备1.过渡（transition）属性n 过渡（transition）属性：平滑地改变一个元素的CSS值，使得元素从一个样式逐渐过渡到另一个样式。n 必须要规定两项内容：（1）应用过渡效果的CSS属性名称。（2）过渡效果所用的时长。n 语法规则：transition：propertydurationtiming-functiondelay；知识准备属性含义取值说明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。示例：过渡属性<styletype="text/css">.box{width:

60px;height:

60px;border:

70pxsolid

#0F0;transition:3s;

/*transition属性写在初始状态的样式中*/}.box:hover{border-radius:

50%;border-color:#F00; /*边框颜色为红色*/}</style>知识准备<body><divclass="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:10px10px20px10px;border:1pxsolid#BFBFBF;background-color:white;box-shadow:2px2px3px#aaaaaa;

}.rotate_left{float:left;<body><divclass="rotate_left"><imgsrc="images/ballade_dream.jpg"alt="郁金香"width="284"height="213"/><p>上海鲜花港的郁金香，花名：BalladeDream。</p></div><divclass="rotate_right"><imgsrc="images/china_pavilion.jpg"alt="世博中国馆"width="284"height="213"/><p>2010年上海世博会，中国馆。</p></div></body>实战演练制作产品展示页案例描述：设计并制作产品展示页，网页效果如下图1所示。当光标悬停在产品模块上时，出现如图2所示的效果。图12强化训练制作商品评论页案例描述：设计并制作商品评论网页，网页效果如下图1所示。当光标悬停在商品模块上时，出现如图2所示的效果。

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论