一图抵千文:实现一个好看的文字遮罩的404页面

本文链接：https://blog.csdn.net/weiyi47/article/details/130277453

页面构建流程

0.请先看图
1.实现的过程
2.布局
3.清空默认样式
4.div.page样式
5.div.bg的处理
6.完整源码
7.总结

0.请先看图

在这里插入图片描述
可能看不懂但是图片是记忆的载体
当以把文章看完在看这个图你就会记载脑中是有载体的那种
这种感觉是收获

1.实现的过程

创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 No Found</title>
</head>
<body>
   
</body>
</html>

2.布局

body如下

<body>
    <div class="bg">
    </div>  
    
    <div class="page">
        <p>404 </p>
        <p>Not Found</p>
    </div>
</body>

<div class="bg"> 作为全屏展示的背景图存在
<div class="page"> 作为漂浮在上层的一个div 显示文字的区域

3.清空默认样式

*{
 	margin: 0;
    padding: 0;
}

4.div.page样式

.page{
            /* 设置背景 */
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-image: url('./bg2.png');
            background-size: cover;
            object-fit: cover;
            /* 设置文字 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 240px;
            text-align: center;
            font-weight: 900;
            /* 文字遮罩  只能通过文字区域才显示图片 */
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            /* 背景运动 */
            animation: bgmove 10s linear infinite alternate;
            /* 定位处理 */
            position: absolute;
            top: 0;
            left: 0;
        }

分块介绍

设置一个铺满全屏背景

  /* 设置一个铺满全屏背景 */
width: 100vw;   让元素宽度等于页面显示宽度
height: 100vh;  让元素的高度等于页面显示高度
overflow: hidden; 超出隐藏
background-image: url('./bg2.png'); 背景图片
background-size: cover; 铺满全屏
object-fit: cover;  防止图片拉伸变形

设置一段居中的文字

 display: flex;  弹性盒模型
justify-content: center;  主轴居中
align-items: center;  交叉轴居中
flex-direction: column;  主轴垂直向下的方向
font-size: 240px; 文字大小
text-align: center; 文字对齐方式 居中
font-weight: 900;  文字的粗细

实现文字遮罩

 /* 文字遮罩  只能通过文字区域才显示图片 */
-webkit-background-clip: text;  背景剪切 只显示文字的区域 -webkit 兼容处理
background-clip: text; 
color: transparent;   让文字透明 把背景图片展示出来

让遮罩的背景运动起来

 /* 背景运动 */
animation: bgmove 10s linear infinite alternate;
 /* 实现图片的运动 */
@keyframes bgmove { 移动背景的位置 x  y
	0%{
	  background-position: 0 0;
	}
	30%{
	  background-position: -100px -300px;
	}
	100%{
	  background-position: 100px 200px;
	}
}

以上的内容就实现的全屏一个404 文字的背景

为了不单调
可以在进一步

让这个元素脱离文档流层级上去

 /* 定位处理 */
position: absolute;
top: 0;
left: 0;

5.div.bg的处理

和上面一样创建一个全屏的背景图

 /* 页面优化 */
.bg{
   width: 100vw;  
   height: 100vh;
   overflow: hidden;
   background-image: url('./bg.webp');
   background-color: #fadeff;
   background-size: cover;
   object-fit: cover;
}

因为<div class="page"> 进行的position: absolute; 脱离文档流当时漂浮在上面

在这里插入图片描述

6.完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 No Found</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            /* 设置背景 */
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-image: url('./bg2.png');
            background-size: cover;
            object-fit: cover;
            /* 设置文字 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 240px;
            text-align: center;
            font-weight: 900;
            /* 文字遮罩  只能通过文字区域才显示图片 */
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            /* 背景运动 */
            animation: bgmove 10s linear infinite alternate;
            /* 定位处理 */
            position: absolute;
            top: 0;
            left: 0;
        }
        /* 实现图片的运动 */
        @keyframes bgmove {
            0%{
                background-position: 0 0;
            }
            30%{
                background-position: -100px -300px;
            }
            100%{
                background-position: 100px 200px;
            }
        }
        /* 页面优化 */
        .bg{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-image: url('./bg.webp');
            background-color: #fadeff;
            background-size: cover;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="bg">
    </div>
    <div class="page">
        <p>404 </p>
        <p>Not Found</p>
    </div>
</body>
</html>