【全】CSS動畫大全之404頁面【a】
阿新 • • 發佈:2021-12-05
非常漂亮的404頁面,可直接複製貼上
效果預覽
程式碼
本文要是對您有幫助,頂我一下哦!↓↓↓<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="https://www.cnblogs.com/beixuan"> <meta name="version" content="1.0.0"> <meta name="date" content="2021/12/02 21:00:26"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS動畫大全之404[a]</title> </head> <style type="text/css"> <!-- 網路字型 --> @import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,400,500,600,700,800,900&display=swap"); * { margin: 0; padding: 0; } body { background-color: #9e80ea; font-family: "Barlow", sans-serif; } a { text-decoration: none; color: #FFF; } .menu { position: absolute; width: 100%; height: 3.75rem; display: grid; grid-template-columns: 1fr 3fr; justify-items: center; align-items: center; z-index: 10; padding: 2% 5%; box-sizing: border-box; } .menu > .title > span { padding: 0.7rem 1rem; font-size: 1rem; letter-spacing: 2px; background-color: #FFF; border-radius: 6px; color: #8b70cc; font-weight: 600; opacity: 0.5; transition: opacity 0.5s ease; cursor: pointer; } .menu > .title > span:hover { opacity: 1; } .menu-list-wrapper { width: 100%; list-style: none; display: grid; justify-items: center; align-items: center; justify-content: end; grid-template-columns: 10% 10% 10% 10%; } .menu-list-wrapper > .menu-list-item { display: inline-block; width: 100%; text-align: center; opacity: 0.5; transition: opacity 0.5s ease; } .menu-list-wrapper:hover .menu-list-item { opacity: 1; } .menu-list-item > a { font-size: 1.25rem; font-weight: 600; letter-spacing: 1px; position: relative; transition: color 0.5s ease; } .menu-list-item > a:hover { color: #ff9b0f; } .menu-list-item > a::after { content: ''; position: absolute; width: 0; height: 5px; left: 100%; bottom: -6px; border-radius: 3px; transition: all 0.5s ease; background: linear-gradient(to right, #e7dcff, #ff9b0f); } .menu-list-item > a:hover::after { width: 80%; left: 0; } .page-wrapper { position: relative; width: 100vw; height: 100vh; display: grid; justify-items: center; align-items: center; overflow: hidden; } .circle::after { border-radius: 50%; } .big-circle { width: 60%; height: 60%; position: absolute; top: 20%; left: 20%; animation: animeCircle 1s cubic-bezier(1, 0.06, 0.25, 1) both; } .big-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50rem; height: 50rem; background-color: #793cb680; box-shadow: inset 5px 20px 40px rgb(54 24 79 / 25%), inset 5px 0px 5px rgb(50 36 62 / 30%), inset 5px 5px 20px rgb(50 36 62 / 25%), 2px 2px 5px rgb(0 0 0 / 50%); } .smail-circle { width: 60%; height: 60%; position: absolute; top: 20%; left: 20%; animation-delay: 1s; animation: animeCircle 1.2s cubic-bezier(1, 0.06, 0.25, 1) both; } .smail-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35rem; height: 35rem; background-color: #793cb680; box-shadow: inset 5px 20px 40px rgb(54 24 79 / 25%), inset 5px 0px 5px rgb(50 36 62 / 30%), inset 5px 5px 20px rgb(50 36 62 / 25%), 2px 2px 5px rgb(0 0 0 / 50%); } .first { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 60%; width: 12.5rem; animation: animeContent 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards; } .second { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 60%; width: 12.5rem; animation: animeContent 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards; } .first > span { position: absolute; border-radius: 2rem; background: linear-gradient(90deg, #55e3ea 13.7%, #ff910b 94.65%); animation: pieceLeft 4s cubic-bezier(1, 0.06, 0.25, 1) infinite both; } .first > span:nth-child(1) { top: 5%; width: 9rem; right: -50%; animation-delay: 2.5s; animation-name: pieceRight; height: 2.5rem; } .first > span:nth-child(2) { top: 55%; left: -30%; width: 8rem; animation-delay: 2s; animation-name: pieceLeft; height: 2rem; } .first > span:nth-child(3) { bottom: 0; left: -50%; width: 7rem; animation-delay: 3s; animation-name: pieceLeft; height: 1rem; } .second > span { position: absolute; height: 2.5rem; border-radius: 2rem; background: linear-gradient(270deg, #7c9fff 13.7%, #f66fff 94.65%); animation: pieceRight 4s cubic-bezier(1, 0.06, 0.25, 1) infinite both; } .second > span:nth-child(1) { top: calc(10% + 40px); left: -50%; width: 7rem; animation-delay: 3s; animation-name: pieceLeft; } .second > span:nth-child(2) { top: calc(50% - 40px); right: -50%; width: 9rem; animation-delay: 3s; animation-name: pieceRight; } .second > span:nth-child(3) { bottom: calc(5% + 16px); right: -20%; width: 8rem; animation-delay: 2s; animation-name: pieceRight; height: 1rem; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: 16rem; font-weight: 600; color: #FFF; animation-delay: 1s !important; animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both; } .text-bg { z-index: 1; color: #3f005f; filter: blur(10px); opacity: 0.8; animation-delay: 0.8s !important; animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both; } .detail { font-size: 24px; color: #fff; z-index: 3; transform: translateY(200px); text-align: center; height: 120px; position: relative; } .detail > .btn { font-size: 16px; border-radius: 50px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #E7DCFF; color: #000000; transition: all 0.6s ease; padding: 0.5rem 1rem; cursor: pointer; } .detail > .btn:hover { background: #ff496a; color: #ffffff; transform: translate(-50%, 8px); } @keyframes pieceLeft { 50% { left: 100%; width: 30%; } } @keyframes pieceRight { 50% { right: 100%; width: 50%; } } @keyframes anime404 { 0% { opacity: 0; transform: scale(10) skew(20deg, 20deg); } } @keyframes animeCircle { 0% { transform: scale(0); } } @keyframes animeContent { 0% { width: 0; } } @media screen and (max-width: 960px) { .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: 8rem; font-weight: 600; color: #FFF; animation-delay: 1s !important; animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both; } .big-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25rem; height: 25em; background-color: #793cb680; box-shadow: inset 5px 20px 40px rgb(54 24 79 / 25%), inset 5px 0px 5px rgb(50 36 62 / 30%), inset 5px 5px 20px rgb(50 36 62 / 25%), 2px 2px 5px rgb(0 0 0 / 50%); } .smail-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15rem; height: 15rem; background-color: #793cb680; box-shadow: inset 5px 20px 40px rgb(54 24 79 / 25%), inset 5px 0px 5px rgb(50 36 62 / 30%), inset 5px 5px 20px rgb(50 36 62 / 25%), 2px 2px 5px rgb(0 0 0 / 50%); } .menu-list-wrapper { display: none; } .smail-menu-list-wrapper { width: 100%; display: grid; justify-items: center; align-items: center; justify-content: end; grid-template-columns: 20%; position: relative; } .smail-menu-list-wrapper > div { position: absolute; right: 0; width: 40px; height: 40px; display: grid; justify-items: center; align-items: center; cursor: pointer; } .smail-menu-list-wrapper > div:hover span { background: #ff9410; } .smail-menu-list-wrapper > div:hover span::before { transform: translateY(-10px); } .smail-menu-list-wrapper > div:hover span::after { transform: translateY(10px); } .smail-menu-list-wrapper span { width: 24px; height: 2px; background: #FFF; position: absolute; } .smail-menu-list-wrapper span::before { content: ''; transform: translateY(-8px); position: absolute; width: 100%; height: 100%; background: inherit; transition: all 0.4s ease; } .smail-menu-list-wrapper span::after { content: ''; transform: translateY(8px); position: absolute; width: 100%; height: 100%; background: inherit; transition: all 0.4s ease; } } </style> <body> <!-- MENU --> <nav> <div class="menu"> <div class="title"> <span>BeiXuan</span> </div> <ul class="menu-list-wrapper"> <li class="menu-list-item"> <a href="#">Home</a> </li> <li class="menu-list-item"> <a href="#">Shop</a> </li> <li class="menu-list-item"> <a href="#">Help</a> </li> <li class="menu-list-item"> <a href="#">Page</a> </li> </ul> <div class="smail-menu-list-wrapper"> <div> <span></span> </div> </div> </div> </nav> <div class="page-wrapper"> <!-- Big Circle --> <div class="big-circle circle"></div> <!-- Smail Circle --> <div class="smail-circle circle"></div> <!-- move box First --> <div class="first"> <span></span> <span></span> <span></span> </div> <!-- move box Second --> <div class="second"> <span></span> <span></span> <span></span> </div> <p class="text">404</p> <p class="text text-bg">404</p> <div class="detail"> <p>NNNNNNO! 您要找的頁面走丟了..</p> <span class="btn">返回首頁</span> </div> </div> </body> </html>