css中常用效果代码

1.子div垂直居中显示常用的css

.box {
    width: 100%;
    height: 100%;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}

2.垂直往下排列，居中

  .flexcenter{
    display: flex;
    direction: row;
    align-items: center;
    justify-content: center;
}

3.悬浮图片+晃动+间接显示

@-webkit-keyframes start {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
	0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
	60% {opacity: 1;-moz-transform: translate(0,0);}
	100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
	0%,30% {opacity: 0;transform: translate(0,10px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-8px);}
}

#array{
	position:absolute;z-index:999;-webkit-animation: start 2s infinite ease-in-out;
}
	//用法
<img *ngIf="i<length1-1" src="../../assets/imgs/arrow-black.png" [ngStyle]="{'top': screenHeight2, 'left': screenWidth2,'width':'20px','height':'15px'}" id="array">

4.背景图居中裁剪

[ngStyle]="{'background': 'center/100% no-repeat url(' + item1 + ')'