专业的网页制作服务好,推推蛙贴吧优化,中国建筑集团排名,广州网站建设系统开发目录
界面展示
完整代码
说明#xff1a; 这是一个简单的星空主题的注册界面#xff0c;使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。 界面展示 完整代码
!DOCTYPE html
html langzh
headmeta charsetUTF-8 这是一个简单的星空主题的注册界面使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。 界面展示 完整代码
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title星空主题注册界面/titlestyle/* 星空背景效果 */body {margin: 0;padding: 0;height: 100vh;background: #1a1a2e; /* 深色背景 */color: white;font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;overflow: hidden;position: relative;}/* 星星动画效果 */.stars {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(https://cdn.pixabay.com/photo/2017/08/30/02/18/starry-night-2695563_960_720.jpg) no-repeat center center fixed;background-size: cover;z-index: -1;}/* 注册框样式 */.register-box {background: rgba(0, 0, 0, 0.6); /* 半透明背景 */padding: 40px;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);width: 300px;text-align: center;}.register-box h2 {margin-bottom: 20px;font-size: 28px;font-weight: bold;}.input-field {margin-bottom: 20px;width: 100%;padding: 10px;background: #333;border: none;border-radius: 5px;color: white;font-size: 16px;}.input-field:focus {outline: none;background-color: #555;}.submit-btn {background: #ff6347; /* 番茄色 */border: none;padding: 15px;width: 100%;font-size: 18px;border-radius: 5px;cursor: pointer;color: white;}.submit-btn:hover {background-color: #ff4500; /* 番茄色变亮 */}/* 小星星动画 */.star {position: absolute;border-radius: 50%;width: 2px;height: 2px;background-color: white;animation: twinkle 1.5s infinite alternate;}keyframes twinkle {0% {opacity: 0.8;transform: scale(1);}100% {opacity: 0.2;transform: scale(1.5);}}/style
/head
bodydiv classstars/divdiv classregister-boxh2注册账号/h2form action# methodPOSTinput typetext classinput-field placeholder用户名 requiredinput typepassword classinput-field placeholder密码 requiredinput typepassword classinput-field placeholder确认密码 requiredbutton typesubmit classsubmit-btn注册/button/form/divscript// 创建小星星动画function createStars() {const numStars 200;for (let i 0; i numStars; i) {let star document.createElement(div);star.classList.add(star);const x Math.random() * 100;const y Math.random() * 100;const duration Math.random() * 2 1;const delay Math.random() * 5;star.style.top ${y}vh;star.style.left ${x}vw;star.style.animationDuration ${duration}s;star.style.animationDelay ${delay}s;document.body.appendChild(star);}}createStars();/script
/body
/html说明
背景使用了一个静态的星空图片作为背景可以替换成自己喜欢的星空图。星星动画通过在页面中动态生成多个小星星并使用 CSS 动画来模拟它们闪烁的效果。注册框一个简单的半透明黑色注册框包含用户名、密码和确认密码输入框提交按钮颜色与星空主题协调。CSS 动画星星通过 keyframes 实现闪烁的效果。 嗨我是命运之光。如果你觉得我的分享有价值不妨通过以下方式表达你的支持 点赞来表达你的喜爱 关注以获取我的最新消息 评论与我交流你的见解。我会继续努力为你带来更多精彩和实用的内容。 点击这里 获取最新动态⚡️ 让信息传递更加迅速。
