32特殊CSS的用法

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);
    }
}
```

单行文本溢出显示省略号
```css
div{
  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属性设置背景图像的起始位置。
```css
div{
    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>
```
猜你喜欢
