css一些手生系列

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;    //当一行文字是数字或字母时或者数字字母组合时会出现不换行局面，用这个样式能有效解决