div+css实现一个404页面代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现一个404页面代码ts。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"> <style> :root { margin: 0; padding: 0; --white: #f2f5f5; --black: #121212; --blue: #308bd1; --gray: #959695; } body { height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-family: Montserrat, sans-serif; color: var(--white); background-color: var(--black); } .error__container { max-width: 800px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; margin: 0 10px; } .error__code { width: 100%; margin: 0 auto; font-size: 6rem; font-weight: 800; display: flex; justify-content: center; align-items: center; gap: 10px; } p:first-of-type { animation: fall 1s linear; transform: rotateZ(-20deg); } p:last-of-type { animation: fall 1.8s linear; transform: rotateZ(8deg); } p:nth-of-type(2) { color: var(--blue); animation: bounce 1.2s 1.8s linear forwards; opacity: 0; } .error__title { font-size: 1.5rem; font-weight: 700; padding: 0 3%; } .error__description { font-size: 0.9rem; text-align: justify; line-height: 1.6; padding: 0 10%; color: v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0