css制作锁屏页面
使用CSS制作锁屏页面
锁屏页面通常包含一个背景、时间显示以及可能的解锁按钮或输入框。以下是实现锁屏页面的关键CSS代码和结构。
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锁屏页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="lock-screen">
<div class="time-display">
<span id="hours">00</span>:<span id="minutes">00</span>
</div>
<div class="unlock-button">滑动解锁</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS样式
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.lock-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
z-index: 1000;
}
.time-display {
font-size: 5rem;
font-weight: bold;
margin-bottom: 2rem;
}
.unlock-button {
padding: 15px 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50px;
cursor: pointer;
user-select: none;
transition: background 0.3s;
}
.unlock-button:hover {
background: rgba(255, 255, 255, 0.3);
}JavaScript动态时间
function updateTime() {
const now = new Date();
document.getElementById('hours').textContent = String(now.getHours()).padStart(2, '0');
document.getElementById('minutes').textContent = String(now.getMinutes()).padStart(2, '0');
}
setInterval(updateTime, 1000);
updateTime(); // 初始化时间添加滑动解锁功能
const unlockButton = document.querySelector('.unlock-button');
let startX, currentX;
unlockButton.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});
unlockButton.addEventListener('touchmove', (e) => {
currentX = e.touches[0].clientX;
const diff = currentX - startX;
if (diff > 0) {
unlockButton.style.transform = `translateX(${Math.min(diff, 150)}px)`;
}
});
unlockButton.addEventListener('touchend', () => {
if (parseInt(unlockButton.style.transform.replace('translateX(', '')) > 100) {
document.querySelector('.lock-screen').style.display = 'none';
}
unlockButton.style.transform = 'translateX(0)';
});响应式设计优化
@media (max-width: 600px) {
.time-display {
font-size: 3rem;
}
.unlock-button {
padding: 12px 30px;
}
}这些代码创建了一个全屏锁屏界面，包含动态显示的时间和一个可滑动的解锁按钮。背景使用渐变色增强视觉效果，时间每秒钟自动更新，滑动解锁按钮向右滑动超过100px时会隐藏锁屏界面。
