css+svg实现一个六方形的404页面效果代码
代码语言:html
所属分类:布局界面
代码描述:css+svg实现一个六方形的404页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #2F3242; } svg { position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -400px; } .message-box { height: 200px; width: 380px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: 50px; color: #FFF; font-family: Roboto; font-weight: 300; } .message-box h1 { font-size: 60px; line-height: 46px; margin-bottom: 40px; } .buttons-con .action-link-wrap { margin-top: 40px; } .buttons-con .action-link-wrap a { background: #68c950; padding: 8px 25px; border-radius: 4px; color: #FFF; font-weight: bold; font-size: 14px; transition: all 0.3s linear; cursor: pointer; text-decoration: none; margin-right: 10px } .buttons-con .action-link-wrap a:hover { background: #5A5C6C; color: #fff; } #Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 { -webkit-animation: float 1s infinite ease-in-out alternate; animation: float 1s infinite ease-in-out alternate; } #Polygon-2 { -webkit-animation-delay: .2s; animation-delay: .2s; } #Polygon-3 { -webkit-animation-delay: .4s; animation-delay: .4s; } #Polygon-4 { -webkit-animation-delay: .6s; animation-delay: .6s; } #Polygon-5 { -webkit-animation-delay: .8s; animation-delay: .8s; } @-webkit-keyframes float { 100% { transform: translateY(20px); } } @keyframes float { 100% { transform: translateY(20px); } } @media (max-width: 450px) { svg { position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -190px; } .message-box { top: 50%; left: 50%; margin-top: -100px; margin-left: -190px; text-align: center; } } </style> </head> <body > <svg width="380px" height="500px" viewBox="0 0 837 1045" version="1.1".........完整代码请登录后点击上方下载按钮下载查看
网友评论0