当前位置：首页 > news >正文

Web-birthday

news 2025/9/15 5:17:07

catalogue

图片全屏显示
- *与.
- div等于视口高度
- 插入图片
- margin
- background-size的auto，cover，contain
div阴影
div悬浮
- 不要position: absolute
- 不要top和left
- 不要transform
烟雾感边框
延时出现
文字
全部代码

图片全屏显示

<!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

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

插入图片

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

margin

margin为0

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

在这里插入图片描述

margin不为0

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

在这里插入图片描述

background-size的auto，cover，contain

在这里插入图片描述

div阴影

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

div悬浮

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

在这里插入图片描述

不要position: absolute

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

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

在这里插入图片描述

不要top和left

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

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

在这里插入图片描述

不要transform

transform定位悬浮元素的位置

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

在这里插入图片描述

烟雾感边框

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

在这里插入图片描述

延时出现

animation:fadeIn 2s forwards;与animation-delay: 1s;和@keyframes fadeIn必须一起出现才能实现“延时淡入”效果
在这里插入图片描述

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

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

效果演示视频

文字

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

           .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%);}

效果演示视频

全部代码

<!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>