使用 html css 和 javascript 的佈告欄逼真的錯覺 https://www.instagram.com/webstreet_code/

在 Instagram 上追蹤我們：https://www.instagram.com/webstreet_code/

    
    
    佈告欄標題>
    
        @import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');

        身體 {
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            高度：100vh；
            字體系列：'Arial'，無襯線字體；
            保證金：0；
            背景顏色：#f0f0f0；
        }

        .佈告欄{
            顯示：柔性；
            彈性包裹：包裹；
            justify-content：空間周圍；
            對齊項目：居中；
            寬度：80%；
            高度：80vh；
            間隙：20px；
            內邊距：20px；
            背景顏色：#54290a； /* 棕色背景 */
            邊框：10px實線#6b3e1b； /* 深棕色邊框 */
            邊框半徑：12px；
            盒子陰影：0 20px 35px rgba(0, 0, 0, 0.4);
        }

        。注意 {
            寬度：200px；
            高度：170 像素；
            背景顏色：#f5f5dc；
            內邊距：15px；
            位置：相對；
            盒子陰影：0 4px 10px rgba(0, 0, 0, 0.2);
            邊框半徑：10px；
            過渡：transform 0.3s 緩動，box-shadow 0.3s 緩動；
            字體系列：“Shadows Into Light”，草書；
            字體大小：1.1rem；
            顏色：#333；
            顯示：柔性；
            對齊項目：居中；
            調整內容：居中；
            文字對齊：居中；
            變換：旋轉（-5deg）； /* 初始傾斜效果 */
        }

        .通知：懸停{
            變換：translateY(-8px) 旋轉(-3deg);
            盒子陰影：0 8px 20px rgba(0, 0, 0, 0.3);
        }

        。別針 {
            位置：絕對；
            上：-8px；
            左：50%；
            變換：translateX(-50%)；
            寬度：18px；
            高度：18px；
            背景顏色：紅色；
            邊界半徑：50%；
            盒子陰影：0 4px 8px rgba(0, 0, 0, 0.3);
            z 索引：1；
        }

        /* 為每個通知添加獨特的傾斜和背景顏色 */
        .notice:nth-child(1) {
            背景顏色：#FFECB3； /* 淺黃色 */
            變換：旋轉（-2deg）；
        }

        .notice:nth-child(2) {
            背景顏色：#C8E6C9； /* 淺綠色 */
            變換：旋轉（2deg）；
        }

        .notice:nth-child(3) {
            背景顏色：#FFCDD2； /* 淺粉紅色 */
            變換：旋轉（-4deg）；
        }

        .notice:nth-child(4) {
            背景顏色：#D1C4E9； /* 薰衣草 */
            變換：旋轉（3deg）；
        }

    風格>
頭>

    <div>




          </div>

以上是使用 html css 和 javascript 的佈告欄逼真的錯覺 https://www.instagram.com/webstreet_code/的詳細內容。更多資訊請關注PHP中文網其他相關文章！