css 汇总！

1，纯css控制文字2行显示多余部分隐藏
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
2，图片宽高 用百分比设置
< div class=‘box’>
< img src="…">
< /div>
.box{
position: relative;
width: 50%;
height: 0;
padding-bottom: 50%;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
3. 渐变蒙版+上下箭头跳动加载
< div class=“load-more”>
< div class=“load-mores”>箭头的路径< /div>
< /div>
.load-more{
z-index: 99;
text-align: center;
color: #0071cd;
font-size: 12px;
font-weight: bold;
position: absolute;
width: 100%;
bottom: 0;
height: 100px;
z-index: 10;
background: -webkit-linear-gradient(90deg,#fff 26%,hsla(0,0%,100%,0));
background: linear-gradient(1turn,#fff 26%,hsla(0,0%,100%,0));
}
.load-mores{
position: relative;
bottom: 0;
margin: 70px auto 0;
width:20px; height:25px;
background:url(…/images/jiantou.png)no-repeat center center;
-webkit-animation: bounce-down 1.5s linear infinite;
animation: bounce-down 1.5s linear infinite;
}
@-webkit-keyframes bounce-down {
25% {-webkit-transform: translateY(-6px);}
50%, 100% {-webkit-transform: translateY(0);}
75% {-webkit-transform: translateY(6px);}
}

@keyframes bounce-down {
25% {transform: translateY(-6px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(6px);}
}