繁星露营地布局效果
代码语言:html
所属分类:布局界面
代码描述:繁星露营地布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --sky: #010641; --gradient-bg: linear-gradient(180deg, rgba(97,77,102,1) 0%, rgba(1,6,65,1) 83%); --tree-a: #0e134f; --tree-b: #6c5665; --mountain: linear-gradient(180deg, rgba(90,80,121,1) 0%, rgba(34,40,104,1) 83%); --shadow: #020836; --sun: #fdc3aa; --growfly: #a57d7a; --light: #f9b12f; --tent-a: #4c5c9a; --tent-b: #252b65; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow-x: hidden; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; overflow: hidden; } body { background-color: var(--sky); } .canvas { position: relative; border-radius: 50%; width: 600px; height: 600px; background-color: var(--sky); overflow: hidden; flex-shrink: 0; } .floor { position: absolute; bottom: 0; width: 100%; height: 180px; background: var(--gradient-bg); z-index: 2; } .tree { position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 280px solid var(--tree-a); z-index: 3; } .tree:before { content: ''; position: absolute; width: 0; height: 0; border-bottom: 280px solid var(--shadow); border-left: 50px solid transparent; -webkit-transform: translatex(-100%); transform: translatex(-100%); } .tree:after { position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 180px solid var(--shadow); bottom: -460px; left: -102px; z-index: 6; } .tree:first-child { left: 20px; bottom: 160px; z-index: 4; } .tree:first-child:after { content: ''; bottom: -460px; left: -122px; z-index: 6; -webkit-transform: skew(-32deg); transform: skew(-32deg); } .tree:nth-child(2) { left: 80px; bottom: 140px; -webkit-transform: scale(0.8); transform: scale(0.8); } .tree:nth-child(2):after { content: ''; bottom: -460px; left: -102px; z-index: 5; -webkit-transform: skew(-30deg); transform: skew(-30deg); } .tree:nth-child(3) { left: 420px; bottom: 40px; -webkit-transform: scale(1.6); transform: scale(1.6); z-index: 6; } .tree:nth-child(4) { left: 490px; bottom: 140px; -webkit-transform: scale(1.4); transform: scale(1.4); } .tree:nth-child(5) { left: 490px; bottom: 140px; -webkit-transform: scale(1.4); transform: scale(1.4); } .mountains { position: absolute; width: 280px; height: 120px; background: var(--mountain); left: 40px; bottom: 120px; border-radius: 120%; box-shadow: 260px 0 0 #222868; z-index: 1; } .sun { position: absolute; border-radius: 50%; width: 240px; height: 240px; background-color: var(--sun); -webkit-transform: translatex(-50%); transform: translatex(-50%); left: 50%; bottom: 10px; box-shadow: 0 0 200px var(--sun); } .stars { position: absolute; z-index: 1; width: 100%; height: 400px; } .star { border-radius: 50%; background: #ffffff; box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8); } .small-stars .star { position: absolute; width: 3px; height: 3px; } .small-stars .star:nth-child(2n) { opacity: 0; -webkit-animation: star-blink 1.2s linear infinite alternate; animation: star-blink 1.2s linear infinite alternate; } .small-stars .star:nth-child(1) { left: 210px; bottom: 50px; } .small-stars .star:nth-child(2) { left: 400px; bottom: 40px; } .small-stars .star:nth-child(3) { left: 420px; bottom: 120px; } .small-stars .star:nth-child(4) { left: 140px; bottom: 250px; } .small-stars .star:nth-child(5) { left: 400px; bottom: 300px; } .small-stars .star:nth-child(6) { left: 170px; bottom: 80px; } .small-stars .star:nth-child(7) { left: 200px; bottom: 360px; -webkit-animation-delay: .2s; animation-delay: .2s; } .small-stars .star:nth-child(8) { left: 250px; bottom: 320px; } .small-stars .star:nth-child(9) { left: 300px; bottom: 340px; } .small-stars .star:nth-child(10) { left: 130px; bottom: 320px; -webkit-animation-delay: .5s; animation-delay: .5s; } .small-stars .star:nth-child(11) { left: 230px; bottom: 330px; -webkit-animation-delay: 7s; animation-delay: 7s; } .small-stars .star:nth-child(12) { left: 300px; bottom: 360px; -webkit-animation-delay: .3s; animation-delay: .3s; } @-webkit-keyframes star-blink { 50% { width: 3px; height: 3px; opacity: 1; } } @keyframes star-blink { 50% { width: 3px; height: 3px; opacity: 1; } } .medium-stars .star { position: absolute; width: 3px; height: 3px; opacity: 0; -webkit-animation: star-blink 1.2s ease-in infinite alternate; animation: star-blink 1.2s ease-in infinite alternate; } .medium-stars .star:nth-child(1) { left: 300px; bottom: 50px; } .medium-stars .star:nth-child(2) { left: 400px; bottom: 40px; -webkit-animation-delay: .4s; animation-delay: .4s; } .medium-stars .star:nth-child(3) { left: 330px; bottom: 300px; -webkit-animation-delay: .2s; animation-delay: .2s; } .medium-stars .star:nth-child(4) { left: 460px; bottom: 300px; -webkit-animation-delay: .9s; animation-delay: .9s; } .medium-stars .star:nth-child(5) { left: 300px; bottom: 150px; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .medium-stars .star:nth-child(6) { left: 440px; bottom: 120px; -webkit-animation-delay: 1s; animation-delay: 1s; } .medium-stars .star:nth-child(7) { left: 200px; bottom: 140px; -webkit-animation-delay: .8s; animation-delay: .8s; } .medium-stars .star:nth-child(8) { left: 30px; bottom: 480px; -webkit-animation-delay: .3s; animation-delay: .3s; } .medium-stars .star:nth-child(9) { left: 460px; bottom: 400px; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .medium-stars .star:nth-child(10) { left: 150px; bottom: 10px; -webkit-animation-delay: 1s; animation-delay: 1s; } .medium-stars .star:nth-child(11) { left: 420px; bottom: 450px; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .medium-stars .star:nth-child(12) { left: 340px; bottom: 180px; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } @keyframes star-blink { 50% { width: 4px; height: 4px; opacity: 1; } } .star-fall { position: relative; border-radius: 2px; width: 80px; height: 2px; overflow: hidden; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .star-fall:after { content: ""; position: absolute; width: 50px; height: 2px; background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4))); background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%); left: 100%; -webkit-animation: star-fall 3.6s linear infinite; animation: star-fall 3.6s linear infinite; } .star-fall:nth-child(1) { left: 80px; bottom: -100px; } .star-fall:nth-child(1):after { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .star-fall:nth-child(2) { left: 200px; bottom: -200px; } .star-fall:nth-child(2):after { -webkit-animation-delay: 2s; animation-delay: 2s; } .star-fall:nth-child(3) { left: 430px; bottom: -50px; } .star-fall:nth-child(3):after { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; } .star-fall:nth-child(4) { left: 400px; bottom: 100px; } .star-fall:nth-child(4):after { -webkit-animation-delay: .2s; animation-delay: .2s; } @-webkit-keyframes star-fall { 20% { left: -100%; } 100% { left: -100%; } } @keyframes star-fall { 20% { left: -100%; } 100% { left: -100%; } } .glowfly { position: absolute; border-radius: 50%; background-color: var(--growfly); box-shadow: 0 0 14px var(--light); width: 8px; height: 8px; z-index: 8; -webkit-animation: fly 5s ease infinite alternate; animation: fly 5s ease infinite alternate; } .glowfly:first-child { left: 120px; botto.........完整代码请登录后点击上方下载按钮下载查看
网友评论0