css中常用效果程式碼
阿新 • • 發佈:2019-01-02
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 + ')'