今天我們來分享一個有趣的話題，就是純CSS實現404頁面的源碼。 在網站開發過程中，404頁面不僅僅只是一個頁面，更代表著網站的態度和對用戶的關心。讓用戶看到一個有趣、精美的404頁面，不僅可以增加用戶黏度，還能塑造網站形象。那么，接下來我們就來看一下如何用CSS來實現一個漂亮的404頁面源碼吧。
<html>
<head>
<title>404 Page Not Found</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #333333;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
.robot {
height: 150px;
width: 150px;
margin-bottom: 30px;
animation: shake 0.8s infinite;
}
.message {
font-size: 24px;
font-weight: bold;
color: #ffffff;
}
.back-home {
display: inline-block;
padding: 8px 15px;
border-radius: 5px;
background-color: #ffffff;
text-decoration: none;
color: #333333;
font-weight: bold;
margin-top: 30px;
}
@keyframes shake {
0% { transform: rotate(0deg); }
10% { transform: rotate(-10deg); }
20% { transform: rotate(10deg); }
30% { transform: rotate(-10deg); }
40% { transform: rotate(10deg); }
50% { transform: rotate(-10deg); }
60% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
</style>
</head>
<body>
<div class="container">
<img class="robot" src="https://cdn.jsdelivr.net/gh/nie-wenjie/pic-blog/imgs/8WwLx6vJ_400x400.png" alt="404 Robot">
<p class="message">Oops! Page not found.</p>
<a class="back-home" href="/">Back to Home</a>
</div>
</body>
</html>以上就是這個純CSS實現404頁面的源碼了。整個頁面的布局非常簡潔，只需要一個容器即可。我們將機器人圖案作為404頁面的主圖片，加入了一個CSS的動畫，使其顯得更加有趣。通過設置背景色、文本樣式，以及一個指向首頁的鏈接，我們成功地打造了一個簡潔、有趣的404頁面。
上一篇dockerudp優化
下一篇純css3隨機翻開卡片