前言

最近在抖音上刷到這種文字表白特效，覺得挺有意思的，就想着自己也能用代碼實現一個,雖然實現得比較基礎，但效果還挺像那麼回事！分享出來給大家參考，也期待大佬們給出更好的實現方案～

實現效果:

在屏幕內隨機出現div盒子,位置隨機,內容隨機選,要求動態的一個個淺出

css部分

div {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

* {
    margin: 0;
    padding: 0;
}

js部分: <br/>
準備數組

//表白話語
let count =['我愛你','想你了','想見你','等你回來','你是我的唯一','永遠在一起','思念如潮','心中有你','每天都想你','無法忘記你','期待與你相見','你是我的陽光','愛你無條件','陪伴是最長情的告白','你是我生命的意義','每時每刻都想你','心跳為你加速','與你共度美好時光','愛意滿滿','你是我最珍貴的寶藏'];

//背景顏色
let colors = ['#FF5733','#33FF57','#3357FF','#F333FF','#33FFF5','#F5FF33','#FF33A8','#A833FF','#33FFA8','#FFA833'];

實現思路

1. document.createElement 來直接創建一個div盒子,用一個變量 hzh 接收
2. 給 hzh 添加css屬性
3. Math.random 隨機數來隨機選取數組中的元素
4. setInterval 來實現盒子創建的時間差
5. setTimeout 中使用css中的 opacity 來實現盒子的淺出效果

實現步驟

let i = 100 //盒子數量
let time = setInterval(() => {
    const hzh = document.createElement('div') //創建div盒子
    hzh.textContent = count[Math.floor(Math.random() * count.length)];//選取隨機文字
    //設置盒子樣式
    hzh.style.position = 'absolute';//絕對定位 
    hzh.style.left = Math.random() * (window.innerWidth - 200) + 'px';//屏幕寬度減去自身的寬度
    hzh.style.top = Math.random() * (window.innerHeight - 100) + 'px';//屏幕高度減去自身的寬高
    hzh.style.transition = 'all 0.3s ease';//添加動畫效果
    hzh.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];//選取隨機顏色
    hzh.style.opacity = '0'; // 初始透明度
    document.body.appendChild(hzh);//將創建的元素添加到頁面body中

    setTimeout(() => {
        hzh.style.opacity = '1'; //最終透明度
    }, 100);

    if (i-- < 0) {
        clearInterval(time)//清除定時器
    }
}, 20);