div+css实现太空宇宙之窗户效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现太空宇宙之窗户效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { width: 100vw; height: 100vh; margin: 0; overflow: hidden; background: radial-gradient(circle, #2c1f5f 300px, #0e0b29); } .scene { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: transform 400ms; } @media (max-width: 680px) { .scene { transform: scale(0.5); } } .window { position: absolute; width: 460px; height: 460px; border: 20px solid #2c1f5f; border-radius: 50%; background-color: #d7e8ff; overflow: hidden; } .window .glass { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; } .window .glass::after { content: ""; position: absolute; border-top: 5px solid #2c1f5f; border-bottom: 5px solid #2c1f5f; width: 100%; height: 180px; } .window .glass::before { content: ""; position: absolute; border-left: 5px solid #2c1f5f; border-right: 5px solid #2c1f5f; width: 180px; height: 100%; } .light { position: absolute; width: 580px; height: 600px; border-radius: 50%; background: linear-gradient(#2c1f5f 40%, #524eb0); overflow: hidden; } .shadow::after { content: ""; position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%) rotate(-45deg); border-top: 8px solid #342b76; border-right: 8px solid #342b76; width: 200px; height: 200px; } .shadow::before { content: ""; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) rotate(-45deg) skew(15deg, 15deg); border-top: 8px solid #332772; border-right: 8px solid #332772; width: 300px; height: 300px; } .sky { position: absolute; width: 100%; height: 100%; background: #92ace4; background: radial-gradient(circle at center 120%, #94aee4 0%, #6e79d6 35%, #4042ad 60%, #221849 100%); } .sky::before { content: ""; position: absolute; width: 100%; height: 110%; top: 50%; transform: translatey(-50%); border-radius: 50%; box-shadow: inset 15px 0px 24px 6px rgba(72, 148, 247, 0.8), inset -15px 0px 24px 6px rgba(72, 148, 247, 0.8); } .sky::after { content: ""; position: absolute; width: 100%; height: 150px; bottom: 0; background: linear-gradient(to top, #d7c9e9 50%, transparent 100%); } .star { position: absolute; background-color: #e0b3ff; border-radius: 50%; } .star:nth-child(1) { top: 11%; left: 17%; opacity: 0.9; height: 2px; width: 2px; box-shadow: 0 0 9px #4f4aaa, 0 0 9px #fff; } .star:nth-child(2) { top: 31%; left: 58%; opacity: 0.3; height: 2px; width: 2px; box-shadow: 0 0 3px #4f4aaa, 0 0 3px #fff; } .star:nth-child(3) { top: 43%; left: 13%; opacity: 0.9; height: 2px; width: 2px; box-shadow: 0 0 10px #4f4aaa, 0 0 10px #fff; } .star:nth-child(4) { top: 40%; left: 56%; opacity: 0.6; height: 2px; width: 2px; box-shadow: 0 0 11px #4f4aaa, 0 0 11px #fff; } .star:nth-child(5) { top: 19%; left: 39%; opacity: 0.6; height: 2px; width: 2px; box-shadow: 0 0 11px #4f4aaa, 0 0 11px #fff; } .star:nth-child(6) { top: 8%; left: 77%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 5px #4f4aaa, 0 0 5px #fff; } .star:nth-child(7) { top: 18%; left: 59%; opacity: 0.5; height: 2px; width: 2px; box-shadow: 0 0 10px #4f4aaa, 0 0 10px #fff; } .star:nth-child(8) { top: 18%; left: 20%; opacity: 0.4; height: 2px; width: 2px; box-shadow: 0 0 8px #4f4aaa, 0 0 8px #fff; } .star:nth-child(9) { top: 44%; left: 17%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 3px #4f4aaa, 0 0 3px #fff; } .star:nth-child(10) { top: 22%; left: 89%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 5px #4f4aaa, 0 0 5px #fff; } .star:nth-child(11) { top: 35%; left: 95%; opacity: 0.6; height: 2px; width: 2px; box-shadow: 0 0 11px #4f4aaa, 0 0 11px #fff; } .star:nth-child(12) { top: 24%; left: 48%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 9px #4f4aaa, 0 0 9px #fff; } .star:nth-child(13) { top: 18%; left: 24%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 7px #4f4aaa, 0 0 7px #fff; } .star:nth-child(14) { top: 24%; left: 78%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 4px #4f4aaa, 0 0 4px #fff; } .star:nth-child(15) { top: 7%; left: 93%; opacity: 0.5; height: 2px; width: 2px; box-shadow: 0 0 14px #4f4aaa, 0 0 14px #fff; } .star:nth-child(16) { top: 43%; left: 82%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 15px #4f4aaa, 0 0 15px #fff; } .star:nth-child(17) { top: 32%; left: 11%; opacity: 0.5; height: 2px; width: 2px; box-shadow: 0 0 10px #4f4aaa, 0 0 10px #fff; } .star:nth-child(18) { top: 4%; left: 53%; opacity: 0.6; height: 2px; width: 2px; box-shadow: 0 0 6px #4f4aaa, 0 0 6px #fff; } .star:nth-child(19) { top: 31%; left: 69%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 9px #4f4aaa, 0 0 9px #fff; } .star:nth-child(20) { top: 50%; left: 5%; opacity: 0.4; height: 2px; width: 2px; box-shadow: 0 0 15px #4f4aaa, 0 0 15px #fff; } .star:nth-child(21) { top: 24%; left: 29%; opacity: 0.4; height: 2px; width: 2px; box-shadow: 0 0 12px #4f4aaa, 0 0 12px #fff; } .star:nth-child(22) { top: 48%; left: 91%; opacity: 0.6; height: 2px; width: 2px; box-shadow: 0 0 7px #4f4aaa, 0 0 7px #fff; } .star:nth-child(23) { top: 8%; left: 33%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 4px #4f4aaa, 0 0 4px #fff; } .star:nth-child(24) { top: 14%; left: 94%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 5px #4f4aaa, 0 0 5px #fff; } .star:nth-child(25) { top: 47%; left: 22%; opacity: 0.9; height: 2px; width: 2px; box-shadow: 0 0 3px #4f4aaa, 0 0 3px #fff; opacity: 1; width: 4px; height: 4px; background: #fff; box-shadow: 0 0 10px #4f4aaa, 0 0 10px white; } .star:nth-child(25)::before, .star:nth-child(25)::after { content: ""; position: absolute; top: 50%; left: 50%; background: radial-gradient(#fff 50%, transparent); border-radius: 50%; opacity: 0.2; transform: translateX(-50%) translateY(-50%); } .star:nth-child(25)::before { width: 2px; height: 40px; } .star:nth-child(25)::after { height: 2px; width: 20px; } .star:nth-child(26) { top: 24%; left: 91%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 8px #4f4aaa, 0 0 8px #fff; } .star:nth-child(27) { top: 23%; left: 56%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 8px #4f4aaa, 0 0 8px #fff; } .star:nth-child(28) { top: 21%; left: 85%; opacity: 0.4; height: 2px; width: 2px; box-shadow: 0 0 10px #4f4aaa, 0 0 10px #fff; } .star:nth-child(29) { top: 8%; left: 90%; opacity: 0.9; height: 2px; width: 2px; box-shadow: 0 0 7px #4f4aaa, 0 0 7px #fff; } .star:nth-child(30) { top: 29%; left: 23%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 4px #4f4aaa, 0 0 4px #fff; } .star:nth-child(31) { top: 12%; left: 62%; opacity: 0.4; height: 2px; width: 2px; box-shadow: 0 0 10px #4f4aaa, 0 0 10px #fff; } .star:nth-child(32) { top: 14%; left: 15%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 13px #4f4aaa, 0 0 13px #fff; } .star:nth-child(33) { top: 36%; left: 44%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 14px #4f4aaa, 0 0 14px #fff; } .star:nth-child(34) { top: 29%; left: 71%; opacity: 0.5; height: 2px; width: 2px; box-shadow: 0 0 7px #4f4aaa, 0 0 7px #fff; } .star:nth-child(35) { top: 2%; left: 96%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 5px #4f4aaa, 0 0 5px #fff; } .star:nth-child(36) { top: 57%; left: 41%; opacity: 0.5; height: 2px; width: 2px; box-shadow: 0 0 11px #4f4aaa, 0 0 11px #fff; } .star:nth-child(37) { top: 56%; left: 44%; opacity: 0.6; height: 2px; width: 2px; box-shadow: 0 0 4px #4f4aaa, 0 0 4px #fff; } .star:nth-child(38) { top: 34%; left: 20%; opacity: 0.4; height: 2px; width: 2px; box-shadow: 0 0 6px #4f4aaa, 0 0 6px #fff; } .star:nth-child(39) { top: 16%; left: 73%; opacity: 0.3; height: 2px; width: 2px; box-shadow: 0 0 10px #4f4aaa, 0 0 10px #fff; } .star:nth-child(40) { top: 20%; left: 30%; opacity: 0.3; height: 2px; width: 2px; box-shadow: 0 0 10px #4f4aaa, 0 0 10px #fff; } .star:nth-child(41) { top: 19%; left: 31%; opacity: 0.5; height: 2px; width: 2px; box-shadow: 0 0 6px #4f4aaa, 0 0 6px #fff; } .star:nth-child(42) { top: 53%; left: 86%; opacity: 0.9; height: 2px; width: 2px; box-shadow: 0 0 11px #4f4aaa, 0 0 11px #fff; } .star:nth-child(43) { top: 14%; left: 16%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 9px #4f4aaa, 0 0 9px #fff; } .star:nth-child(44) { top: 51%; left: 87%; opacity: 0.7; height: 2px; width: 2px; box-shadow: 0 0 3px #4f4aaa, 0 0 3px #fff; } .star:nth-child(45) { top: 8%; left: 101%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 11px #4f4aaa, 0 0 11px #fff; } .star:nth-child(46) { top: 5%; left: 9%; opacity: 0.6; height: 2px; width: 2px; box-shadow: 0 0 7px #4f4aaa, 0 0 7px #fff; } .star:nth-child(47) { top: 49%; left: 62%; opacity: 0.8; height: 2px; width: 2px; box-shadow: 0 0 6px #4f4aaa, 0 0 6px #fff; } .star:nth-c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0