一. 目標 個人賬號的設置記憶功能-避免用戶每次登錄之後重新對錶單欄位做展示設置 二、存儲方案 輕量方案 結合localstorage低容量存儲（5M），根據LRU只存最近訪問的20至30張表格列配置數據 全量方案 大記憶體G級別，使用indexedDb進行存儲，有多少表格操作列數據就存多少， 結合第 ...
1. 實現波浪背景
div{ width: 400px; height: 200px; outline: 2px dashed gray; --c: #2196F3; --w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat; --w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat; background: var(--w1),var(--w2),var(--w1),var(--w2); background-position-x: -200%, -100%, 0%, 100%; background-position-y: 100%; background-size: 50.5% 100%; animation: m 1s infinite linear; } @keyframes m { 0% {background-position-x:-200%, -100%, 0%, 100%} 100%{background-position-x: 0%, 100%, 200%, 300%} }
原理：透明到純色的徑向漸變，然後複製該漸變背景，最後加上背景水平方向移動的無限迴圈動畫
2. 文字波浪背景
將該漸變應用在文本標簽上，並添加一下css屬性
{
font-size: 100px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text; /*文本裁切*/
-webkit-text-stroke: 2px var(--c); /*文本內描邊*/
}
最後，在做一些適當調整，比如弧度銜接處 動畫時間等 。搞定
3. 總結
- 波浪的本質上是一個曲面在水平方向的周期性運動，曲面本身並沒有變化
- 波浪可以拆分為兩個不同方向上的徑向漸變
- 特別需要註意漸變的尺寸和位置，確保能夠完美的銜接在一起
- 動畫其實就是不斷改變漸變的水平位置，也就是
background-position-x - 相比於其他實現，漸變的最大優勢是不占用任何標簽
- 還可以輕易的實現文字波浪效果
註：文章來源於前端偵探 ，作者XboxYan，《這個文字波浪動畫，真酷！》
