css制作锁屏页面

使用CSS制作锁屏页面

锁屏页面通常包含一个半透明或模糊的背景，以及一个解锁按钮或输入框。以下是实现方法：

HTML结构

<div class="lock-screen">
  <div class="lock-content">
    <h1>已锁定</h1>
    <input type="password" placeholder="输入密码">
    <button class="unlock-btn">解锁</button>
  </div>
</div>

CSS样式

.lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lock-content {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.lock-content input {
  display: block;
  margin: 1rem auto;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.unlock-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
}

添加动画效果

可以为锁屏页面添加淡入效果：

.lock-screen {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

响应式设计

确保锁屏在不同设备上都能正常显示：

@media (max-width: 600px) {
  .lock-content {
    width: 80%;
    padding: 1rem;
  }
}

解锁功能实现

需要配合JavaScript实现解锁功能：

document.querySelector('.unlock-btn').addEventListener('click', function() {
  const password = document.querySelector('input').value;
  if(password === '1234') { // 替换为实际密码验证逻辑
    document.querySelector('.lock-screen').style.display = 'none';
  } else {
    alert('密码错误');
  }
});

其他样式变体

1. 全屏图片背景锁屏

   .lock-screen {
   background: url('background.jpg') no-repeat center center;
   background-size: cover;
   }

2. 时间显示锁屏

   

   <div class="lock-content">
   <div class="time">12:30</div>
   <div class="date">2023年6月15日</div>
   <input type="password" placeholder="滑动解锁">
   </div>

这些方法可以组合使用，根据实际需求调整样式和功能。锁屏页面常用于Web应用、管理后台等需要临时锁定界面的场景。