css+div布局实现发射控制面板代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局实现发射控制面板代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> .body { --panel-color: #d1d1c8; --panel-shadow: #b0b0a8; --dark-grey: #4a4a4a; --text-color: #2a2a2a; --safe-green: #29a329; --armed-amber: #ffc107; --launch-red: #d90429; display: grid; place-content: center; width: 100%; height: 100vh; background: #3a3a3a; font-family: "Roboto Condensed", sans-serif; } @keyframes pulse-red { 0%, 100% { background: var(--launch-red); box-shadow: 0 0 10px var(--launch-red); } 50% { background: #ff1f4e; box-shadow: 0 0 20px 5px #ff1f4e; } } .launch-console { width: 310px; background: var(--panel-color); border: 3px solid #1a1a1a; border-radius: 10px; padding: 20px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4), inset 0 3px 5px rgba(255, 255, 255, 0.4); display: grid; grid-template-rows: auto 1fr; gap: 20px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXVpaWl5eXlscHB6enp4eHhwcHCFhoaAgIB+fn53d3dLS0soKChPT0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0