纯CSS实现的温馨可爱的404找不到

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 09:25:15

　　纯CSS实现的温馨可爱的404找不到

纯 CSS 实现温馨可爱的 404 页面

理解需求

你希望创建一个使用纯 CSS 实现的 404 页面，并且这个页面要给人一种温馨可爱的感觉。

实现思路

选择合适的背景： 柔和的色调、可爱的图案或插画都可以营造温馨氛围。
字体设计： 选择圆润可爱的字体，搭配合适的字号和行高。
动画效果： 添加一些简单的动画，比如飘动的元素、闪烁的星星等，增加趣味性。
布局设计： 采用简洁明了的布局，突出重点信息。

代码示例

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>   页面走丢啦</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="error-page">
    <h1 class="title">Oops! 页面走丢啦～</h1>
    <p class="description">你访问的页面好像迷路了，不如换个关键词搜索试试？</p>
    <a href="/" class="button">返回首页</a>
  </div>
</body>
</html>

CSS

body {
  font-family: 'Comic Sans MS', cursive;
  background-color: #f8f8f8;
  text-align: center;
}

.error-page {
  margin: 100px auto;
  text-align: center;
}

.title {
  font-size: 48px;
  color: #f05050;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: bounce 1s infinite;
}

.description {
  font-size: 24px;
  color: #666;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 20px;
}

/* 动画效果 */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}