前端笔记十三,变形与动画相关属性

transform

transform:设置变形;需添加浏览器前缀-o-;-webkit-;-moz-等;有如下变形函数

translate(tx [,ty]):组件横向上移tx,纵向上移ty距离

translateX(tx):组件横向上移动tx距离

translateY(ty):组件纵向上移动ty距离

scale(sx,sy):横向上缩放比例为sx,纵向上缩放比例为sy;sy省略情况下默认等于sx

scaleX(sx):只在横向上进行缩放,缩放比例为sx

scaleY(sy):只在纵向上进行缩放,缩放比例为sy

rotate(angle):组件顺时针转过angle角度

skew(sx[,sy]):设置组件沿X轴倾斜sx角度,沿Y轴倾斜sy角度,sy可省略,默认为0

skewX(sx):设置组件沿X轴倾斜sx角度

skewY(sy):设置组件沿Y轴倾斜sy角度

matrix(m11,m12,m21,m22,dx,dy):基于矩阵变换的函数,前四个参数将组成变形矩阵,dx,dy将负责对左边系统进行平移

transform-origin:设置变形的中心点,属性值指定为xCenter,yCenter,支持以下几种属性值:

  left:指定旋转中心点位于组件的左边界,只指定给xCenter

  top:指定旋转中心点位于组件的上边界,只指定给yCenter

  right:指定旋转中心点位于组件的右边界,只指定给xCenter

  bottom:指定旋转中心点位于组件的下边界,只指定给yCenter

  center:指定旋转中心点位于组件的中间,如果将xCenter,yCenter都制定为center则旋转中心点为元素的中心

  长度值:指定旋转中心点距离左边界,右边界的长度

  百分比:指定旋转中心点位于横向,纵向上的百分比位置


transition

transition动画控制组件的某个属性发生改变时会经历一段时间,以平滑渐变的方式发生改变。包含以下4个部分

transition-property:指定元素的哪个属性进行平滑渐变处理,可以指定background-color,width,height等

transition-duration:指定平滑渐变的持续时间

transition-timing-function:指定渐变的速度,可选值

  ease:开始慢后快再减慢,相当于cubic-bezier(0.25,0.1,0.25,1)

  linear:匀速,相当于cubic-bezier(0,0,1,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(x1,x2,y1,y2):通过贝济诶函数来控制动画的速度

transition-delay:指定延迟时间


Animation动画:提供了以下属性

animation-name:指定动画名称

animation-duration:指定动画持续时间

animation-timing-function:指定动画变化速度

animation-delay:指定动画延迟时间

animation-iteration-count:指定动画循环执行次数

重点动画:鱼眼效果。鼠标放在文字上面的时候,文字放大

时间: 2024-10-23 15:21:42

前端笔记十三,变形与动画相关属性的相关文章

UIImageView帧动画相关属性和方法-15-05-04

UIImageView帧动画相关属性和方法 •@property(nonatomic,copy) NSArray *animationImages; Ø需要播放的序列帧图片数组(里面都是UIImage对象,会按顺序显示里面的图片) Ø •@property(nonatomic) NSTimeInterval animationDuration; Ø帧动画的持续时间 • •@property(nonatomic) NSInteger animationRepeatCount; Ø帧动画的执行次数(

前端 之 jQuery: 简介, 选择器, 动画效果, 属性操作; (一)

jQuery 简介 jQuery 选择器 jQuery 动画效果 jQuery 属性操作 jQuery 简介 为什么要使用jQuery: 答: 因为优秀. 什么是 jQuery: jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可. 关于jQuery的相关资料: 官网:http://jquery.com/ 官网API文档:http://api.jquery.com/

iOS中UIImageView帧动画相关属性和方法

@property(nonatomic,copy)NSArray *animationImages; 需要播放的序列图片数组(里面都是UIImage对象,会按顺序显示里面的图片) @property(nonatomic)NSTimeInterval animationDuration; 帧动画的持续时间 @property(nonatomic)NSInteger animationRepeatCount; 帧动画的执行次数(默认是无限循环) - (void)startAnimating; 开始执

前端笔记十五 DOM编程相关

20160221 DOM编程详解 从document对象到每个常用的html元素,DOM都提供了对应的类 HTMLDocument:代表HTML文档本身 HTMLBodyElement:代表<body />控件 HTMLDivElement:代表<div />控件 HTMLFormElement:代表表单控件 HTMLSelectElement:代表列表框,下拉菜单控件 HTMLOptionElement:代表列表框,下拉菜单选项控件 HTMLFrame:代表<iframe

UIImageView帧动画相关属性和方法

@property(nonatomic,copy) NSArray *animationImages; 需要播放的序列帧图片数组(里面都是UIImage对象,会按顺序显示里面的图片) @property(nonatomic) NSTimeInterval animationDuration;帧动画的持续时间 @property(nonatomic) NSInteger animationRepeatCount; 帧动画的执行次数(默认是无限循环) - (void)startAnimating;开

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

前端笔记九,背景、边框和补丁相关属性

常用的背景相关属性:以下属性均在style内设置 background:设置对象的背景样式,不建议直接通过该属性来控制 background-attachment:设置背景图片是随对象内容滚动还是固定的,可选值: scroll:会随内容的滚动而滚动 fixed:背景图片固定 background-color:设置背景色,如果设置了背景图片则会覆盖背景色 background-image:设置背景图片,使用url()函数 background-position:设置对象的背景图片的位置,第一个表示

前端笔记十一,盒模型与布局相关属性

布局相关属性  float:控制目标组件是否浮动以及如何浮动,设置浮动后,该组件被当做块组件处理,即相当于display属性为block:可选的属性值 left:指定对象向左浮动 right:指定对象向右浮动 clear:设置组件的左.右是否哪边不允许出现浮动对象.可选属性值: none:默认值,两边都允许出现浮动组件 left:不允许左边出现浮动组件 right:不允许右边出现浮动组件 both:两边都不允许出现浮动组件 clip:控制对元素进行裁剪 auto:不裁剪 rect(a,b,c,d

前端笔记十,大小、定位、轮廓相关属性

大小相关属性 height:用于设置对象的高度 max-height:设置对象的最大高度,如果该属性值小于min-height属性值,则自动转换为min-height的属性值 min-height:设置对象的最小高度 width:设置对象宽度 max-width:设置对象的最大宽度 min-width:设置对象的最小宽度 box-sizing属性:设置width,height控制哪些区域的宽度.高度:可使用值 content-box:设置的width,height控制元素的内容区的宽度和高度(只