一些css实用小技巧

最新推荐文章于 2025-02-12 08:41:25 发布

你蠢哭我咯

最新推荐文章于 2025-02-12 08:41:25 发布

阅读量624

点赞数 1

分类专栏： css样式

css样式专栏收录该内容

18 篇文章

订阅专栏

1.CSS变量实现鼠标移上效果

css按钮悬浮特效
html

<button class="btn">
    <span>这个效果很不错</span>
</button>

let btn = document.getElementsByClassName('btn')[0]
btn.onmousemove = (e) => {
    const x = e.pageX - btn.offsetLeft
    const y = e.pageY - btn.offsetTop
    // 将鼠标划过坐标存在CSS的变量中。
    btn.style.setProperty('--x', `${ x }px`)
    btn.style.setProperty('--y', `${ y }px`)
}

css

.btn {
    position: relative;
    appearance: none;
    background: #f72359;
    padding: 10px 150px;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
}
.btn:hover::before {
    --size: 500px;
}
.btn::before {
    --size: 0; 
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
}
.btn span {
    position: relative;// 防止文字被渐变色盖住
}

默认设置伪元素width、height为0，鼠标移上设置width、height为500px.
使用background的radial-gradient实现背景色渐变效果
hover时触发了动画width、height动画
根据鼠标移动位置变更伪元素css变量，实现位置变更

2.单行居中、多行居左、n行省略

这里写图片描述
开发过程中经常会遇到单行居中、多行居左、n行省略这样的需求。特别是一些弹窗提示信息~~
html

<div class="box">
    <h2>
        <p>
            <span>标题居中</span>
        </p>
    </h2>
    <div class="container">
        <p>
            <span>我是两行居左两行居左两行居左两行居左两行居左两行居左</span>
        </p>
    </div>
    <div class="container">
        <p>
            <span>我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略省略省略</span>
        </p>
    </div>
</div>

css

.box {
   width: 320px;
    padding: 0 10px;
    margin: 10px auto;
    background: #efefef;
    border-radius: 6px;
}
.box p {
    display: inline-block; 
    text-align: center;
}
h2,.container {
    text-align: center; // 单行时居中
    padding: 10px 0;
}
h2 span,.container span {
    text-align: left;// 文字居左
    // display: inline-block; // 不需要n行省略时
    // webkit内核下超出n行省略
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;// 2即为n
    -webkit-box-orient: vertical;
}

主要还是使用display属性

display:inline // 在同一行，并且宽度就等于文字内容的宽度且设置宽度无用
display:inline-block  // 既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding
display:block // 块级元素会自动换新行，占领一行,可以设置宽高，margin，padding

外层盒子使用文本居中
利用元素的inline-block特性，文本设置居左。宽高都是文本内容撑起，当文本超过一行时。就会实现居左
开发过程中，需要公共的弹窗提示信息用这个是再好不过了~只更换文本内容即可。居中、居左一步到位

3.文本均匀分布、英文换行

这里写图片描述
html

<div class="box">
    <div class="left">
        文本均匀分布:
    </div>
    <div class="right">
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内
    </div>
</div>

css

.box{
    width: 500px;
    margin: 100px auto;
    border: 1px solid #efefef;
    padding: 10px;
    border-radius: 6px;
}  
.left{
    width: 150px;
    height: 20px;
    float: left;
    color: #9ca8b9;
    text-align-last: justify;
}
.right{
    color: #5D6072;
    padding-left: 10px;
    overflow: hidden;
    // 解决纯英文或者数字时不换行问题
    word-break: break-all; 

}

文本均匀分布

text-align-last: justify;

单词换行
既整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

word-wrap: break-word;

字母换行
如果该行末端有个英文单词很长，它会把单词截断，变成该行末端为inter(interesting的前端部分)，下一行为esting(interesting)的后端部分了。

word-break: break-all;

使用bfc实现左右布局
实现文本均匀分布还可以使用flex布局，父元素盒子中使用justify-content: space-between，使用多个子元素标签，每个标签中放置一个文字，这里不做细说

4.气泡阴影

这里写图片描述
实现一个气泡，带有三角形，同时有整体阴影。
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

// 伪元素三角形
.box:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 40px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -20px -10px;
}

这个时候气泡已经出现了，接下来给气泡加阴影。给.box加阴影

box-shadow: 1px 1px 10px #999;

我们发现，伪元素三角形并没有阴影。给伪元素加上阴影发现同样不是我们想要的效果

使用滤镜进行添加投影实现阴影效果。成功

filter: drop-shadow(1px 1px 5px #999);

一个骚操作.利用filter: drop-shadow更改png图标颜色
这里写图片描述
原理：
drop-shadow 滤镜可以给元素或图片非透明区域添加投影
将背景透明的 PNG 图标施加一个不带模糊的投影，就等同于生成了另外一个颜色的图标
再通过 overflow:hidden 和位移处理将原图标隐藏
css

.icon,.icon-color{
    display: inline-block;
    width: 144px;
    height: 144px;
    background: url('https://www.easyicon.net/api/resizeApi.php?id=1177549&size=128') no-repeat center / cover;
    overflow: hidden;
}
.icon-color:after{
    content: '';
    display: block;
    height: 100%;
    transform: translateX(-100%);
    background: inherit;
    filter: drop-shadow(144px 0 0 #0E80FF); 
}

html

<i class="icon"></i>
<i class="icon-color"></i>

注意低版本ie不兼容。

ps：以上效果仅做展示，实际运用，需考虑兼容性问题。