首先是html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Error Page | CodingNepal</title>
<link rel="stylesheet" href=".??s/404.css">
</head>
<body>
<div class="error-page">
<div class="content">
<h1 data-text="404">404</h1>
<h4 data-text="Opps! Page not found">Opps! Page not found</h4>
<p>Sorry, the page you're looking for doesn't exist. If you think something is broken, report a problem.</p>
<div class="btns">
<a href="#">return home</a>
<a href="#">report problem</a>
</div>
</div>
</div>
</body>
<?cml>
然后是css部分
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ac, #9b59b6);
height: 100vh;
background-size: 400%;
}
.error-page{
position: absolute;
top: 10%;
left: 17%;
right: 17%;
bottom: 10%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
.error-page .content{
max-width: 600px;
text-align: center;
}
.content h1{
font-size: 18vw;
line-height: 1em;
position: relative;
}
.content h1:after{
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ac, #9b59b6);
background-size: 400%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
animation: animate 10s ease-in-out infinite;
}
@keyframes animate{
0%{
background-position: 0 0;
}
25%{
background-position: 100% 0;
}
50%{
background-position: 100% 100%;
}
75%{
background-position: 0 100%;
}
100%{
background-position: 0 0;
}
}
.content h4{
margin-bottom: 20px;
text-transform: uppercase;
color: #000;
max-width: 600px;
font-size: 2em;
position: relative;
}
.content h4:after{
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
text-shadow: 1px 1px 2px rgba(225, 225, 255,0.4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.content p{
font-size: 1.2em;
color: #0d0d0d;
}
.content .btns{
margin: 25px 0;
display: inline-flex;
}
.content .btns a{
display: inline-block;
margin: 0 10px;
text-decoration: none;
border: 2px solid #69a6ce;
color: #69a6ce;
font-weight: 500;
padding: 10px 25px;
border-radius: 25px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.content .btns a:hover{
color: #fff;
background: #69a6ce;
}
然后我說一說在制作過程中遇到的一些問題
首先是css帶*部分
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
*指的是通配符
margin: 0和padding: 0指的是內(nèi)外邊距都為0裆泳，消除了瀏覽器的默認(rèn)值笔咽。
outline:none;
outline 屬性設(shè)置元素周圍的輪廓線。
請(qǐng)始終在 outline-color 屬性之前聲明 outline-style 屬性。元素只有獲得輪廓以后才能改變其輪廓的顏色。
輪廓線不會(huì)占據(jù)空間，也不一定是矩形。
默認(rèn)值： none
設(shè)置輪廓的樣式：
p
{
outline-style:dotted;
}
none 默認(rèn)巩掺。定義無輪廓。
dotted 定義點(diǎn)狀的輪廓页畦。
dashed 定義虛線輪廓胖替。
solid 定義實(shí)線輪廓。
double 定義雙線輪廓豫缨。雙線的寬度等同于 outline-width 的值独令。
groove 定義 3D 凹槽輪廓。此效果取決于 outline-color 值好芭。
ridge 定義 3D 凸槽輪廓燃箭。此效果取決于 outline-color 值。
inset 定義 3D 凹邊輪廓舍败。此效果取決于 outline-color 值招狸。
outset 定義 3D 凸邊輪廓。此效果取決于 outline-color 值邻薯。
inherit 規(guī)定應(yīng)該從父元素繼承輪廓樣式的設(shè)置裙戏。
然后是box-sizing
簡(jiǎn)單的說：如果要想盒子模型中的content寬度與通過css width 屬性設(shè)置的寬度相同，則使用box-sizing: content-box, 若想使整個(gè)盒子的寬度固定(即使padding和border發(fā)生變化)時(shí)弛说，則使用 box-sizing:border-box.
然后是
font-family:'Poppins',sans-serif;
這個(gè)font-family指的是設(shè)定一個(gè)列表挽懦，讓瀏覽器有字體可詢翰意，帶單引號(hào)部分指的是自己想用的字體木人，而sans-serif則是保證頁面不會(huì)顯示字體信柿。
然后是body部分
background:-webkit-repeating-linear-gradient
這個(gè)指的是讓背景實(shí)現(xiàn)線性漸變
補(bǔ)充說明
但是不知道為什么，我的一開始顯示這個(gè)會(huì)報(bào)錯(cuò)醒第，原因是因?yàn)槲覜]有寫background屬性渔嚷，導(dǎo)致clip沒有生效，正確的做法是在-webkit-background-clip:text;前加background屬性稠曼。
然后是
box-shadow:0px 5px 10px rgba(0,0,0,0.1）;
指的是陰影屬性后面的值分別表示x值y值和陰影的模糊半徑形病。若加了inset則指的是內(nèi)陰影，一般默認(rèn)為外陰影霞幅。
然后是
.error-page.content{
max-width:600px;
text-align:center;
max-width為最大寬度
如果設(shè)置了width漠吻，那寬度就定死了
而設(shè)置了max-width，實(shí)際寬度可以在0~max-width之間司恳，當(dāng)元素內(nèi)部寬度不足max-width時(shí)途乃，外層元素的寬度隨內(nèi)層元素寬度改變。
text-align：center 就是把HTML元素中的文本排列到中間的意思扔傅。
補(bǔ)充
text-transform : none | capitalize | uppercase | lowercase
none : 無轉(zhuǎn)換發(fā)生
capitalize : 將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫耍共，其余無轉(zhuǎn)換發(fā)生
uppercase : 轉(zhuǎn)換成大寫
lowercase : 轉(zhuǎn)換成小寫
然后是
content:attr(data-text);
attr可以從content中獲取動(dòng)態(tài)內(nèi)容，可以有一點(diǎn)代替js的效果猎塞，括號(hào)里寫的是自定義名字
接下來
animation:animate10sease-in-outinfinite;
animation賦予元素動(dòng)畫效果
10sease-in-outinfinite;是以低速開始到結(jié)束
然后是
@keyframesanimate{
0%{
background-position:0 0;
}
25%{
background-position:100% 0;
}
50%{
background-position:100% 100%;
}
75%{
background-position:0 100%;
}
100%{
background-position:0 0;
}
這個(gè)指的是創(chuàng)建動(dòng)畫试读，即開始變到百分之二十五、五十荠耽、七十五和結(jié)束的時(shí)候發(fā)生圖片定位
然后是
transition:all0.3sease;
transition屬性是過渡屬性钩骇，可以產(chǎn)生過渡效果
最后是
border:2px solid #69a6ce;
border-radius
這個(gè)其實(shí)是圓角屬性
最后顯示出來的效果圖是這樣的
