纯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);

  }

}