常用css样式日常集锦

最新推荐文章于 2023-08-04 10:33:54 发布

Study_Live_Sun

最新推荐文章于 2023-08-04 10:33:54 发布

阅读量260

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Study_Live_Sun/article/details/111307359

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、文字长度超出，追加省略号

显示一行

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

显示两行，多了追加省略号

 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

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

效果如图：

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号，如下。

实现方法：

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
overflow: hidden;

效果如图：

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

实现方法：

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}

效果如图：

适用范围：
该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

1. 将height设置为line-height的整数倍，防止超出的文字露出。
2. 给p::after添加渐变背景可避免文字只显示一半。
3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。
  来源： http://www.daqianduan.com/6179.html

2、CSS3实现炫酷的流光按钮效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流光按钮</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #000000;
    }
    a{
        display: block;
        text-decoration: none;
        color: #FFFFFF;
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: linear-gradient(90deg, #AFCD2D, #1AD5A0, #CC0FE0, #cdab2d,#AFCD2D);
        background-size: 400%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50px;
        z-index: 1;
    }
    a:hover{
        animation: liuguang 4s linear infinite;
    }
    @keyframes liuguang {
       100%{
           background-position: -400% 0;
       }
    }
    a:hover::before{
        content: '';
        background: linear-gradient(90deg, #AFCD2D, #1AD5A0, #CC0FE0, #cdab2d,#AFCD2D);
        background-size: 400%;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        position: absolute;
        animation: liuguang 4s linear infinite;
        z-index: -1;
        border-radius: 50px;
        filter: blur(20px);
    }
</style>
<body>
    <a>流光按钮</a>
</body>
</html>

3、翻页效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页效果</title>
</head>
<style>
    @keyframes donghua {
        0%{
            transform: perspective(1000px) rotateX(0deg);
        }
        100%{
            transform: perspective(1000px) rotateX(360deg);
        }
    }
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 200px;
        height: 300px;
        border: 3px solid #000000;
        position: absolute;
        left: calc(50% - 100px);
        top: calc(50% - 150px);
        transform: rotate(-90deg);
    }
    .contain{
        width: 100%;
        height:100%;
        position: absolute;
        left: 0;
        top: 0;
        border: 3px solid red;
        transform-style: preserve-3d;
        animation: donghua 5s linear infinite;
    }
    .contain .item{
        width: 100%;
        height: 100%;
        position: absolute;
        border: 5px solid red;
    }
    .contain .item img{
        height: 100%;
        width: 100%;
    }
    .contain .item:nth-child(2){
        transform: rotateX(45deg);
    }
    .contain .item:nth-child(3){
        transform: rotateX(-45deg);
    }
    .contain .item:nth-child(4){
        transform: rotateX(90deg);
    }
</style>
<body>
   <div class="main">
        <div class="contain">
            <div class="item">
                <img src="images/1.jpeg">
            </div>
            <div class="item">
                <img src="images/2.jpg">
            </div>
            <div class="item">
                <img src="images/3.jpeg">
            </div>
            <div class="item">
                <img src="images/4.jpeg">
            </div>
            <div class="item">
                <img src="images/5.jpeg">
            </div>
        </div>
   </div>
</body>
</html>

4、唱片效果

环形纹路：使用 repeating-radial-gradient 径向渐变

唱片光束效果

5、聚光灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聚光灯效果</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 60px;
        font-weight: 600;
        background: #222222;
        color: #999999;
    }
    div{
        position: relative;
    }
    div:after{
        content: 'CAOMENGLING';
        color: transparent;
        position: absolute;
        left: 0;
        background-image: -webkit-linear-gradient(left,#1AD5A0,#AFCD2D,#CC0FE0,#FFFFFF,#1AD5A0,#AFCD2D,#CC0FE0,#FFFFFF);
        background-clip: text;
        -webkit-background-clip: text;
        clip-path: circle(100px at 0% 50%);
        animation: run 4s  infinite alternate;
    }
    @keyframes run {
        0%{
            clip-path: circle(100px at 0% 50%);
        }
        50%{
            clip-path: circle(100px at 50% 50%);
        }
        100%{
            clip-path: circle(100px at 100% 50%);
        }
    }

</style>
<body>
  <div>CAOMENGLING</div>
</body>
</html>

6、使用float浮动导致页面塌陷问题

最常用的方法是使用封装好的clearfix类

7、子元素垂直居中的方式之一

采用绝对定位的方式实现

.parent{
    display:relative;
}
.child{
    display:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

8、解决图片因为基线对齐有空白

9、移动端适配

Study_Live_Sun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常用css样式日常集锦

1、文字长度超出，追加省略号显示一行white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;显示两行，多了追加省略号 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:
复制链接

扫一扫