1、animation
div{
animation:myAnima 1s linear infinite; //后两个属性表示匀速和循环播放
-moz-animation:myAnima 1s linear infinite; /* Firefox */
-webkit-animation:myAnima 1s linear infinite; /* Safari and Chrome */
-o-animation:myAnima 1s linear infinite; /* Opera */
//以下表示动画只播放一次
animation-iteration-count: 1; /*动画只执行一次*/
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-fill-mode: forwards; /*让动画停留在最后一帧 */
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
@keyframes myAnima{
from{ //简单的动画
}
to{
}
}
@keyframes myAnima{
0%{
}
20%{
}
.
.
.
100%{
}
}
适配前缀还有@-moz-keyframes、@-webkit-keyframes、@-o-keyframes
2、箭头
实心箭头
.arrow{ //向下的箭头
display: block;
width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: #ff0 transparent transparent transparent;
}
空心箭头
.arrow{ //向左的箭头
display: block;
width: 7px;
height: 7px;
border-top: 1px solid #999;
border-right: 1px solid #999;
transform: rotate(-135deg);
}
斜箭头
.arrow{
display: block;
width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: #ff0 transparent transparent transparent;
transform: skew(-30deg);
}
3、文本只显示一行,溢出出现省略号
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 1;
overflow: hidden;
4、文本显示两行,溢出出现省略号
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
white-space: pre-wrap; //当一行文字是数字或字母时或者数字字母组合时会出现不换行局面,用这个样式能有效解决