1.会使用transform 2D变形设置网页元素样式
transform:变形
function:函数,方法
transform:[transform-function];
/*2D平移
translate(10px,5px); 参数1:X轴 参数2:Y轴
*/
transform: translate(10px,5px);
/*2D缩放 参数1:宽度 参数2:高度 数值 以倍数增长
一个参数代表整体变化
*/
transform: scale(1.2,2);
/*2D旋转 参数根据正数值度数顺时针旋转 负数逆时针 */
transform: rotate(60deg);
/*2D倾斜 参数1:X轴倾斜 参数2:Y轴倾斜 */
transform: skew(30deg);
只有倾斜会改变元素的形状,其他的都不会
2.会使用transform 制作过渡动画
过渡是将原本快速的动画变形效果 慢下来 过程平滑 动画的转化过程 渐现 渐弱 动画快慢…
transtion: 过渡属性 过渡所需要的时间 过渡函数 开始过渡之前所需要的时间;
过渡属性:定义转换动画的css属性名称 指定css属性是什么 width height background-color
一般 为了让所有效果显示出来 使用 all
过渡所需要的时间:以秒为单位
过渡函数:ease: 默认属性 由快到慢 linear:匀速 ease-in:越来越快 ease-out:越来越慢 ease-in-out :先快后慢
开始过渡之前所需要的时间:正数:需要多少时间开始过渡 负数 : 过渡时间从该时间点开始 超过的时间会截断 0:立即开始
3.会使用animation制作网页动画
animation:动画
@keyframes:关键帧
@keyframes name{
开始:{css样式} 0%{width:20px}
中间:{css样式} 50%{width:40px}
结束:{css样式} 100%{width:80px}
}
animation关键帧调用关键帧
p1:动画名称
p2:动画时间
p3:动画方式
linear 线行播放
p4:延迟时间
p5:动画播放次数
默认值:1
infinite:无限次播放
p6:动画播放方向
normal:循环向前播放
alternate:动画播放为偶数次则向前播放
p7:动画播放状态
running:启动播放
paused:暂停
p8:动画开始之前和结束之后发生的操作
forwards:播完后停在最后的位置
backwards:播完后回到开始的位置
both:拥有上面两个的效果
animation:name 3s infinite;