戈壁星空夜色效果
代码语言:html
所属分类:布局界面
代码描述:戈壁星空夜色效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { margin: 0; height: 100%; background: linear-gradient(#0f1a2b, #411d63); } .moon { width: 100px; height: 100px; border-radius: 50%; background: #ffffdd; box-shadow: inset -11px -8px 0px 4px #feffa2, 0px 0px 10px 0px #feffa2, 0px 0px 50px 0px #feffa2, 0px 0px 500px 0px #feffa2; display: inline-block; position: relative; top: 10%; left: 10%; animation: 3s moonglow ease-in-out infinite alternate; } .crater { position: absolute; background: rgba(255, 244, 118, 1); border-radius: 50%; box-shadow: inset 1px 1px 0px 1px #ecec79; } .crater:nth-child(1) { width: 25px; height: 25px; top: 57%; left: 30%; } .crater:nth-child(2) { width: 16px; height: 16px; top: 30%; left: 23%; } .crater:nth-child(3) { width: 12px; height: 12px; top: 50%; left: 14%; } .crater:nth-child(4) { width: 30px; height: 30px; top: 20%; left: 30%; box-shadow: none; background: rgba(255, 244, 118, 0.3); } .ground { position: absolute; left: 0; bottom: 0; width: 100%; height: 11%; background: black; z-index: 100; perspective: 1000px; } .rock:nth-child(1) { position: absolute; width: 10%; height: 100%; top: -20%; left: 10%; background: black; border-radius: 20px; transform: skewX(10deg) } .rock:nth-child(2) { position: absolute; width: 15%; height: 100%; top: -20%; right: 25%; background: black; border-radius: 20px; transform: rotateZ(10deg) skewX(9deg); } .rock:nth-child(3) { position: absolute; width: 5%; height: 50%; top: -15%; right: 38%; background: black; border-radius: 20px; transform: rotateZ(-15deg); } .star { position: absolute; width: 1px; height: 1px; border-radius: 50%; animation-iteration-count: infinite; } .cactus { position: absolute; bottom: 10%; right: 10%; z-index: 900; width: 100px; } .shooting { position: relative; top: 30%; left: 30%; width: 300px; height: 5px; border-radius: 5px; display: inline-block; transform: rotateZ(-30deg); } .shooting .core { display: inline-block; position: absolute; top: 0; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #ffff84; box-shadow: 0px 0px 3px 1px rgba(255, 245, 131, 0.5), 0px 0px 10px 5px rgba(255, 245, 131, 0.2); animation: 6s linear infinite core; } .shooting .trail { display: inline-block; position: absolute; content: ''; width: 100px; height: 5px; border-radius: 50% 0 0 50%; background: linear-gradient( to right, rgba(255, 245, 174,0.7), rgba(255, 245, 174, 0.2) 50%, transparent); top: -1px; left: 0; animation: 6s linear infinite trail; } @keyframes glow { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } @keyframes moonglow { 0% { transform: scale(1); } 100% { transform: scale(1.02); } } @keyframes core { 0% { left: 100%; opacity: 1; } 5% { left: 60%; opacity: 0.8; } 10% { left: 0; opacity: 0; } 100% { left: 0; opacity: 0; } } @keyframes trail { 0% { left: 100%; opacity: 1; width: 0; } 5% { left: 65%; opacity: 0.5; width: 150px; } 10% { left: 0; opacity: 0; width: 150px; } 100% { left: 0; opacity: 0; width: 150px; } } </style> </head> <body translat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0