番禺网站建设哪家好,更新wordpress,php和python做网站,12建网站文章目录 第九章 动画9.1 transform动画9.2 transition过渡动画9.3 定义动画 第九章 动画
9.1 transform动画
transform 2D变形
translate()#xff1a;平移函数#xff0c;基于X、Y坐标重新定位元素的位置
scale()#xff1a;缩放函数#xff0c;可以使任意元素对象尺… 文章目录 第九章 动画9.1 transform动画9.2 transition过渡动画9.3 定义动画 第九章 动画
9.1 transform动画
transform 2D变形
translate()平移函数基于X、Y坐标重新定位元素的位置
scale()缩放函数可以使任意元素对象尺寸发生变化
rotate()旋转函数取值是一个度数值
skew()倾斜函数取值是一个度数值
div{transform:translate(100px,100px);transform:translate(100px,100px) scale(1.5)
}rotate( )函数只是旋转而不会改变元素的形状
skew( )函数是倾斜元素不会旋转会改变元素的形状
9.2 transition过渡动画
transition: 要过度的属性 时间 过度函数 延迟时间
transition: 要过度的属性 时间 过度函数 延迟时间要过的属性可以使用 all 或者一个一个的写
时间 单位s秒 ms毫秒
过度函数ease速度由快到慢默认值linear速度恒速匀速运动ease-in速度越来越快渐显效果ease-out速度越来越慢渐隐效果ease-in-out速度先加速再减速渐显渐隐效果
9.3 定义动画
/* 定义动画*/
keyframes imgacion{0%{transform: rotate(0deg) scale(1);}100%{transform: rotate(360deg) scale(1.2);}}/* 使用动画*/img:hover{animation-name: imgacion;animation-duration: 2s;}
}
