欢迎光临
我的个人博客网站

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

比12px更小的文字

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

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

CSS语音,wifi样式

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

<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;     } } 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 实用CSS效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏