文字省略
单行省略
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 当动画不播放时(动画完成时,动画有一个延迟未开始播放时),要应用到元素的样式。