css实现打开书柜404错误导航页面代码
代码语言:html
所属分类:布局界面
代码描述:css实现打开书柜404错误导航页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body, html { height: 100%; } body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; padding: 0; background-color: #446072; font-family: "Microsoft YaHei",sans-serif; color: white; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } h1 { margin-top: 2rem; } p{ font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; } .shelf { position: relative; width: 30rem; height: 14rem; border: 0.5rem solid #374d5b; border-radius: 0.5rem; background-color: rgba(255, 255, 255, 0.1); -webkit-perspective: 130rem; perspective: 130rem; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.2); } .door { position: absolute; width: 14.8rem; height: 14rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; box-sizing: border-box; padding: 1rem; background-color: #374d5b; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .door::before { width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: rgba(0, 0, 0, 0.1); content: ""; } .door.left { border-radius: 0 0.75rem 0.75rem 0; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-animation: leftDoorOpen 3.5s ease-out forwards 1s, leftDoorFlap 15s linear infinite forwards 9s; animation: leftDoorOpen 3.5s ease-out forwards 1s, leftDoorFlap 15s linear infinite forwards 9s; -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } .door.right { right: 0; border-radius: 0.75rem 0 0 0.75rem; -webkit-animation: rightDoorOpen 3s ease-out forwards 1.5s, rightDoorFlap 10s linear infinite forwards 8s; animation: rightDoorOpen 3s ease-out forwards 1.5s, rightDoorFlap 10s linear infinite forwards 8s; -webkit-transform-origin: 100% 0 0; transform-origin: 100% 0 0; } .book { position: absolute; box-sizing: border-box; padding: 0.8rem 4rem 0.8rem 2rem; border-radius: 0.25rem; background-color: rgba(255, 255, 255, 0.1); color: white; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1rem; cursor: pointer; box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1); } .book.home-page { -webkit-transform: rotate(-90deg) translate(-12.4rem, 3rem); transform: rotate(-90deg) translate(-12.4rem, 3rem); -webkit-transform-origin: 0; transform-origin: 0; } .book.about-us { -webkit-transform: rotate(-100deg) translate(-13.4rem, 6.1rem); transform: rotate(-100deg) translate(-13.4rem, 6.1rem); -webkit-transform-origin: 0; transform-origin: 0; } .book.contact { right: 2rem; bottom: 0.2rem; border-radius: 0.3rem 0 0 0.3rem; } .book.faq { right: 0.8rem; bottom: 3.3rem; border-radius: 0.3rem 0 0 0.3rem; } .book.not-found { width: 12rem; height: 3.5rem; border: 1px dashed rgba(255, 255, 255, 0.3); background-color: transparent; -webkit-transform: rotate(-90deg) translate(-12rem, 13rem) scale(1); transform: rotate(-90deg) translate(-12rem, 13rem) scale(1); -webkit-transform-origin: 0; transform-origin: 0; cursor: default; -webkit-animation: bookFadeOut 1s 3s infinite forwar.........完整代码请登录后点击上方下载按钮下载查看
网友评论0