实用CSS效果

用这篇文章，记录一些平时可能会用到的、或不是一下就能想出来或者是有些奇妙的的CSS效果。

单行居中，多行居左

<h2><p>单行居中，多行居左</p></h2>

h2{text-align:center}
p{display:inline-block;text-align:left;}

适应容器的背景图

背景图片不会因为容器的宽高进行拉伸，图片宽高比例不会有变化，以容器中心为中心，超出的部分不显示。

background:url("./xxxx.jpg") no-repeat;
background-size: cover;
background-position: center center;

文字超出容器显示省略号

需要容器具有一个固定的宽度，这样的话，如果文字太长能让他以省略号（...）的形式处理超出的文字。

overflow: hidden;    
text-overflow:ellipsis;    
white-space: nowrap;

多行的情况下

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;

同时在这种情况下，有时候要判断是否文字被折叠出了...,我们可以用容器的clientHeight和scrollHeight进行比较，一般情况下，被折叠后scrollHeight会比clientHeight高。

比12px更小的文字

有时候设计图设计出来的文字是比12px更小的，而像chrome这样的浏览器，最小的文字也是12px,所以可以用css的scale属性，设置出比12px更小的文字

transform:scale(0.7);
-webkit-transform-origin-x: 0;

CSS语音，wifi样式

只用一个dom元素，利用伪类写的一个语音播放的样式，去掉动画也能当一个wifi

<div class="voice-box"></div>

.voice-box{
    position:relative;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#999;
}
.voice-box:before{
    content:" ";
    position: absolute;
    top:-16px;		/*当前元素总高度（height+border）减去顶点元素的一半高度（height/2）*/
    left:-18px;		/*与top相当，具体微调*/
    width:24px;
    height:24px;
    border: 8px solid transparent;
    border-right: 8px solid #999;
    border-radius: 50%;
    animation: fadeInOut 1s infinite 0.2s;.
}
.voice-box:after{
    content:" ";
    position: absolute;
    top:-28px;
    left:-28px;
    width:48px;
    height:48px;
    border: 8px solid transparent;
    border-right: 8px solid #999;
    border-radius: 50%;
    animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

光影划过效果

进度条增强的显示效果

<div class="progress_bar"></div>

.progress_bar{
	width:300px;
	position: relative;
	background:#C0C0C0;
	height:14px;
	border-radius:12px;
	margin:30px auto 10px;
	overflow:hidden;
}
.progress_bar:before{
	content:"";
	position: absolute;
	width:80px;
	height:100%;
	top:0;
	left:-50%;
	overflow: hidden;
	background: linear-gradient(left,rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 75%);
	background: -moz-linear-gradient(left,rgba(255, 255, 255, 0) 25%,rgba(255, 255, 255, .6) 50%,rgba(255, 255, 255, 0) 75%);
	background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 75%);
	transform: skewX(-45deg);
	-webkit-transform: skewX(-45deg);
	-moz-transform: skewX(-45deg);
	animation:tolight 2s infinite linear;
	-webkit-animation:tolight 2s infinite linear;
}
@keyframes tolight{ 
  from { left:-50%; } 
  to { left:100%; }
}
@-webkit-keyframes tolight{
  from { left:-50%; }
  to { left:100%; }
}