使用 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中文网其他相关文章！