css实现一个简洁404错误页面代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个简洁404错误页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <title>404错误页效果</title> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700'); @import url('https://fonts.googleapis.com/css?family=Catamaran:400,800'); .error-container { text-align: center; font-size: 180px; font-family: 'Catamaran', sans-serif; font-weight: 800; margin: 20px 15px; } .error-container > span { display: inline-block; line-height: 0.7; position: relative; color: #FFB485; } .error-container > span { display: inline-block; position: relative; vertical-align: middle; } .error-container > span:nth-of-type(1) { color: #D1F2A5; animation: colordancing 4s infinite; } .error-container > span:nth-of-type(3) { color: #F56991; animation: colordancing2 4s infinite; } .error-container > span:nth-of-type(2) { width: 120px; height: 120px; border-radius: 999px; } .error-container > span:nth-of-type(2):before, .error-container > span:nth-of-type(2):after { border-radius: 0%; content:""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 999px; box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4), inset 0 30px 0 rgba(239, 250, 180, 0.4), inset -30px 0 0 rgba(255, 196, 140, 0.4), inset 0 -30px 0 rgba(245, 105, 145, 0.4); animation: shadowsdancing 4s infinite; } .error-container > span:nth-of-type(2):before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .screen-reader-text { position: absolute; top: -9999em; left: -9999em; } @keyframes shadowsdancing { 0% { box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4), inset 0 30px 0 rgba(239, 250, 180, 0.4), inset -30px 0 0 rgba(255, 196, 140, 0.4), inset 0 -30px 0 rgba(245, 105, 145, 0.4); } 25% { box-shadow: inset 30px 0 0 rgba(245, 105, 145, 0.4), inset 0 30px 0 rgba(209, 242, 165, 0.4), inset -30px 0 0 rgba(239, 250, 180, 0.4), inset 0 -30px 0 rgba(255, 196, 140, 0.4); } 50% { box-shadow: inset 30px 0 0 rgba(255, 196, 140, 0.4), inset 0 30px 0 rgba(245, 105, 145, 0.4), inset -30px 0 0 rgba(209, 242.........完整代码请登录后点击上方下载按钮下载查看
网友评论0