星际穿越太空版404错误页面
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Space 404</title> <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet"> <style> html, body { height: 100%; width: 100%; margin: 0px; background: linear-gradient(90deg, #2f3640 23%, #181b20 100%); } .moon { background: linear-gradient(90deg, #d0d0d0 48%, #919191 100%); position: absolute; top: -100px; left: -300px; width: 900px; height: 900px; content: ''; border-radius: 100%; box-shadow: 0px 0px 30px -4px rgba(0, 0, 0, 0.5); } .moon__crater { position: absolute; content: ''; border-radius: 100%; background: linear-gradient(90deg, #7a7a7a 38%, #c3c3c3 100%); opacity: 0.6; } .moon__crater1 { top: 250px; left: 500px; width: 60px; height: 180px; } .moon__crater2 { top: 650px; left: 340px; width: 40px; height: 80px; transform: rotate(55deg); } .moon__crater3 { top: -20px; left: 40px; width: 65px; height: 120px; transform: rotate(250deg); } .star { background: grey; position: absolute; width: 5px; height: 5px; content: ''; border-radius: 100%; transform: rotate(250deg); opacity: 0.4; animation-name: shimmer; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes shimmer { from { opacity: 0; } to { opacity: 0.7; } } .star1 { top: 40%; left: 50%; animation-delay: 1s; } .star2 { top: 60%; left: 90%; animation-delay: 3s; } .star3 { top: 10%; left: 70%; animation-delay: 2s; } .star4 { top: 90%; left: 40%; } .star5 { top: 20%; left.........完整代码请登录后点击上方下载按钮下载查看
网友评论0