文字单多行省略和 动画语法

文字省略

单行省略

1.溢出隐藏

overflow:hidden;

2.强制一行显示

white-space:nowrap;

3.文本溢出时显示为省略号

text-overflow:ellipsis;

多行省略

1.溢出隐藏

over:hidden;

2.把对象作为弹性伸缩盒子模型显示

diaplay:-webkit-box;

3.设置伸缩盒子对象的子元素排列方式

-webkit-box-orient:vertical;

4.设置块元素包含的文本行数

-wekit-line-clamp:3;

动画语法（animation）

animation: 动画名字 时间 运动曲线 开始时间 播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停。

1.animation-name：要绑定到选择器的关键帧所属名字。
定义动画：@keyframes+name{ }.

@keyframes name {
     from {
             width:200px;
     }
     
     to {
     		width:600px;
	 }

2.animation-duration 需要多少秒，毫秒完成。

3.animation-timing-function 如何完成一个周期。

4.animation-delay 在启动前延迟的间隔。

5.animation-iteration-count 定义动画的播放次数。(number数字 infinite无数次)

div {
	   transition-duration:3s;
       transition-timing-function:ease-out；/* ease-out 淡出 */	
       transition-delay:2s;
       animation-iteration-count:infinite;
     }

6.animation-direction 是否轮流反向播放动画。（nomal，alternat）

div{
	animation-direction:alternat;
}

7.animation-play-state 设置动画暂停。

.box:hover {
	 animation-play-state:paused;
}

8. animation-fill-mode 当动画不播放时（动画完成时，动画有一个延迟未开始播放时），要应用到元素的样式。