Html基础-定位、动画详解与举例

固定定位： 相对于浏览器定位，脱离正常的文档流必须配合left,right进行操作*/

position: fixed;

相对定位： 相对于自己当前的位置进行定位

往左边实际往右边走，不会脱离文档流，只是样子改变了 left right 等

position: relative;

绝对定位： 相对于设置了定位的父元素或者祖先元素进行定位

如果没有找到根就相对于html文档定位，会脱离正常的文档流

position: absolute;

二、动画animation

动画名称

animation-name: cutton;

动画时间

animation-duration: 3s;

动画变换速度 ease由快到慢到快 默认ease linear线性平均移动 ease-in ease-on也可以

设置贝塞尔曲线

cubic-bezier(0.77,0.13,0.55,1.79);

animation-timing-function: ease;

延迟时间

animation-delay: 2s;

动画循环次数 ,infinite无限循环

animation-iteration-count: 3;

运动方向，奇数次正常运动，偶数次反方向运动 alternate往返运动,reverse反方向运动，

奇数次反方向，偶数次正常 alternate-reverse,normal正常*/

animation-direction: alternate;

保留最后一帧的效果的位置

animation-fill-mode:forwards;

基本格式

css制作下载loading图标

css动画自主练习：