animation的参数animation: name(动画名)、duration(运行周期)、timing-function(运行轨迹)、delay(延迟时间)、iteration-count(播放次数)、direction(是否轮流反向);animation: circleAnimation 1s linear 0s infinite normal;```css@keyframes circleAnimation { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }}```单行文本溢出显示省略号```cssdiv{ overflow: hidden;/*溢出隐藏*/ text-overflow:ellipsis;/*隐藏的部分用...表示*/ white-space: Nowrap;/*文字不能转行*/}```顶部=>定位=>代码```html:run<div style="position: fixed;top:0;left:0;"> 顶部定位代码:内容区</div>```transform 转换属性对元素进行移动(translate)、缩放(scale)、旋转(rotate)或倾斜(skew)。transform: translate与position: relative之间的区别```css<div style="width:500px;height:800px;border:1px solid green;margin: 0 auto;"> <div style="width:200px;height:100px;border:1px solid blue;transform: translate(50%);"></div> <!--transform: translate(50%) 偏移自身宽度的50%；--> <div style="width:200px;height:100px;border:1px solid green;position: relative;left:50%;"></div> <!--position: relative;left:50% 偏移父级盒子宽度的50%；--></div>```background-position属性设置背景图像的起始位置。```cssdiv{ background-position:left top; /*如果仅指定一个关键字，其他值将会是"center"*/ background-position:0% 0%; /*如果仅指定了一个值，其他值将是50％*/ background-position:5px 5px; /*如果仅指定了一个值，其他值将是50％*/ background-position:30% top; /*可以混合使用％和toP*/}``````html:run<!DOCTYPE html><html><head> <Meta charset="utf-8"> <style> .my-cell[class*=cell] { background: red; } .my-cell { background: green; } </style></head><body><div class="my-cell">div</div></body></html>```
