1.CSS變數實現滑鼠移上效果

html

<button class="btn">
    <span>這個效果很不錯</span>
</button>

js

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：以上效果僅做展示，實際運用，需考慮相容性問題。