实用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
image

<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;
    }
}

光影划过效果

进度条增强的显示效果
image

<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%; }
}
posted @ 2021-04-21 16:44  这个少年有点热丶  阅读(182)  评论(0编辑  收藏  举报