首页 > 网页制作  > 前端开发

实用CSS效果

admin 前端开发 2021-04-26 16:44:32  
后台-系统设置-扩展变量-手机广告位-内容正文底部

用这篇文章,记录一些平时可能会用到的、或不是一下就能想出来或者是有些奇妙的的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
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;
    }
}

文章来源:https://www.cnblogs.com/EaVango/p/14685855.html

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/wyzz/62063c38d1ea4740fbb19f2dda9ae716.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码