catalogue
图片全屏显示
<!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>