Web-birthday - 技术栈

catalogue

图片全屏显示
div阴影
div悬浮
- [不要position: absolute](#不要position: absolute)
- 不要top和left
- 不要transform
烟雾感边框
延时出现
文字
全部代码

图片全屏显示

javascript 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>Happy Birthday to You🩷</title>
        <style>
            *{
                margin:0;
                box-sizing:border-box;
            }
            body,html{
                height:100%;
            }
            .fullsreen{
                height:100vh;
                width:100%;
                background-image: url("background.jpg");
                background-size: cover;
                background-position: center;
            }
        </style>
    </head>
    <body>
        <div class="fullsreen"></div>
    </body>
</html>

*与.

*所有元素，.指定类名的元素

div等于视口高度

div是块级元素，默认宽度是100%，但高度为0

javascript 复制代码

.fullscreen-bg{
                /* 等于视口高度 */
                height:100vh;
            }

插入图片

javascript 复制代码

.fullscreen-bg{
                /* 等于视口高度 */
                height:100vh;
                width:100%;
                background-image: url("background.jpg");
            }

margin

margin为0

javascript 复制代码

 *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }

margin不为0

javascript 复制代码

        <style>
            *{
                /* margin:0; */
                padding:0;
                box-sizing: border-box;
            }

background-size的auto，cover，contain

div阴影

javascript 复制代码

            .shadow{
                box-shadow: 0 5px 15px blue;
            }

div悬浮

javascript 复制代码

           .shadow{
                /* 悬浮 */
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }

不要position: absolute

position: absolute使其脱离文档流，即悬浮

javascript 复制代码

          .shadow{
                /* 悬浮 */
                /* position: absolute; */
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }

不要top和left

top和left定位悬浮元素的位置

javascript 复制代码

           .shadow{
                /* 悬浮 */
                position: absolute;
                /* top: 50%;
                left: 50%; */
                transform: translate(-50%,-50%);
            }

不要transform

transform定位悬浮元素的位置

javascript 复制代码

            .shadow{
                /* 悬浮 */
                position: absolute;
                top: 50%;
                left: 50%;
                /* transform: translate(-50%,-50%); */
            }

烟雾感边框

javascript 复制代码

            .shadow{
                /* 烟雾感 */
                filter: blur(10px);
            }

延时出现

animation:fadeIn 2s forwards;与animation-delay: 1s;和@keyframes fadeIn必须一起出现才能实现"延时淡入"效果

opacity 默认是 1，即不透明，要先设置为0，才能看到延时淡入的效果

javascript 复制代码

            .shadow{
                /* 延时 */
                opacity: 0;
                animation:fadeIn 2s forwards;
                animation-delay: 1s;
            }
            @keyframes fadeIn {
                from {opacity:0;}
                to {opacity:1;}
            }

效果演示视频

文字

z-index的数值越大，层级越高
font-size是字体大小
font-family是字体类型

javascript 复制代码

           .word{
                font-family: 'YouYuan';
                color: violet;
                font-size: 3rem;
                /* 延时 */
                opacity: 0;
                animation:fadeIn 2s forwards;
                animation-delay: 2s;
                /* 悬浮 */
                position: absolute;
                z-index: 1;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }

效果演示视频

全部代码

javascript 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>Happy Birthday🩷</title>
        <style>
            *{
                margin:0;
                box-sizing:border-box;
            }
            body,html{
                height:100%;
            }
            .fullsreen{
                height:100vh;
                width:100%;
                background-image: url("background.jpg");
                background-size: cover;
                background-position: center;
            }
            .shadow{
                height: 50vh;
                width: 50%;
                background-image: url("shadow.jpg");
                background-size: cover;
                background-position: center;
                box-shadow: 0 5px 15px blue;
                /* 悬浮 */
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                /* 烟雾感 */
                filter: blur(10px);
                /* 延时 */
                opacity: 0;
                animation:fadeIn 2s forwards;
                animation-delay: 1s;
            }
            @keyframes fadeIn {
                from {opacity:0;}
                to {opacity:1;}
            }
            /* 文字 */
            .word{
                font-family: 'YouYuan';
                color: violet;
                font-size: 3rem;
                /* 延时 */
                opacity: 0;
                animation:fadeIn 2s forwards;
                animation-delay: 2s;
                /* 悬浮 */
                position: absolute;
                z-index: 1;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div class="fullsreen"></div>
        <div class="shadow"></div>
        <div class="word">
            <p>生日快乐呀！🩷</p>
        </div>
    </body>
</html>