一、今日内容: 1、过渡 transition 要过渡的属性 花费的时间 运动曲线 何时开始
要过渡的属性可以是宽高 背景色 内外边距 等等 所以直接写一个all就可以
花费的时间必须的秒 s
运动曲线 默认ease(逐渐变慢) linear 匀速
何世开始 单位必须是秒
2、 css 2D转换 transform
translate 2D位移
可以是translateX()对x轴水平单独位移
translateY()对y轴水平单独位移
translate()两个值代表x轴和y轴位移
如果是百分比就根据他元素的自身宽高来决定 对行内元素没效果
利用 2d位移把盒子居中
先margin-left:50%
margin-top:50%
transform:transition(-50%,-50%)
rotate()2d旋转 单位必须是deg
scale (x,y)2d缩放 单位是元素宽高的倍数 一个值代表两个值得倍数 两个值 第一个x轴 第二个y轴
改变旋转的中心点
origin(x,y)可以是方位名词 可以是像素值
3、动画制作
1 先定义动画
@keyforms move{}
再在元素中调用动画 animation-name()name是定义动画的名称 必须属性
animation-duration 定义动画多长时间可以完成 单位是秒 必须属性
animation-timing-function 规格动画的速度曲线 默认ease steps(): 步长 ,就是分几步来完成动画,如果有了steps(),就不需要写 ease或者linear等运动曲线值
animation-delay 规定动画何时开始
animation-interation-count 规定动画播放次数默认1 可以是循环 infinite
animation-diection 规定动画是否逆向播放
animation-play-state 规定动画是否运行或暂停 paused 暂停 配合:hover使用
animation-fill-mode 规定动画结束后的状态 保持结束后的状态forwards
二、今日问题
无
三解决方法
无
|