css制作锁屏页面

使用CSS制作锁屏页面

创建一个锁屏页面需要结合HTML和CSS，以下是一个简单的实现方法：

HTML结构

<div class="lock-screen">
  <div class="time">12:34</div>
  <div class="date">2023年6月15日</div>
  <div class="unlock-button">滑动解锁</div>
</div>

CSS样式

.lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.time {
  font-size: 5rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.date {
  font-size: 1.5rem;
  margin-bottom: 3rem;
}

.unlock-button {
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
}

.unlock-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

添加滑动解锁功能

要实现滑动解锁效果，可以添加JavaScript交互：

const unlockButton = document.querySelector('.unlock-button');
let startX = 0;

unlockButton.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  document.addEventListener('mousemove', moveHandler);
  document.addEventListener('mouseup', upHandler);
});

function moveHandler(e) {
  const distance = e.clientX - startX;
  if (distance > 0) {
    unlockButton.style.transform = `translateX(${distance}px)`;
  }
}

function upHandler() {
  document.removeEventListener('mousemove', moveHandler);
  document.removeEventListener('mouseup', upHandler);

  if (parseInt(unlockButton.style.transform.replace('translateX(', '')) > 100) {
    document.querySelector('.lock-screen').style.display = 'none';
  }
  unlockButton.style.transform = '';
}

添加背景模糊效果

要让锁屏页面有模糊效果，可以修改CSS：

.lock-screen {
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.5);
}

.time {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

响应式设计考虑

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

@media (max-width: 768px) {
  .time {
    font-size: 3rem;
  }

  .date {
    font-size: 1rem;
  }

  .unlock-button {
    padding: 0.8rem 1.5rem;
  }
}

添加动画效果

让锁屏出现时有动画效果：

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

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

这些代码组合起来可以创建一个美观且功能完整的CSS锁屏页面，可以根据需要进一步调整样式和功能。