当前位置：首页 > 技术博客 > HTML > 【原创】浏览器访问动画单页提示页面

【原创】浏览器访问动画单页提示页面

1年前 (2025-03-22)HTML826

微信,QQ用户访问转浏览器访问的动画提示页面，www.liuzhixi.cn作者原创！

<!DOCTYPE html>    
<html lang="zh-CN">    
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>请使用浏览器打开</title>    
<style>    
/* 基础样式 */    
body {    
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    
background: url("https://static.zhihu.com/heifetz/assets/sign_bg.47eec442.png") no-repeat center center fixed;    
background-size: cover;    
display: flex;    
justify-content: center;    
align-items: center;    
height: 100vh;    
margin: 0;    
color: #fff;    
position: relative;    
overflow: hidden;    
}    
/* 遮罩层 */    
body::before {    
content: "";    
position: absolute;    
top: 0;    
left: 0;    
width: 100%;    
height: 100%;    
background: rgba(0, 0, 0, 0.5);    
z-index: 0;    
}    
.container {    
text-align: center;    
background: rgba(255, 255, 255, 0.1);    
padding: 40px;    
border-radius: 20px;    
backdrop-filter: blur(10px);    
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);    
max-width: 400px;    
width: 100%;    
animation: fadeIn 1s ease-in-out;    
position: relative;    
z-index: 1;    
border: 1px solid rgba(255, 255, 255, 0.3);    
}    
h1 {    
font-size: 2rem;    
margin-bottom: 20px;    
font-weight: 600;    
color: #fff;    
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);    
}    
p {    
font-size: 1rem;    
line-height: 1.6;    
margin-bottom: 30px;    
color: rgba(255, 255, 255, 0.8);    
}    
.browser-icon {    
width: 100px;    
height: 100px;    
margin-bottom: 20px;    
animation: bounce 2s infinite;    
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));    
}    
/* 按钮样式 */    
.button {    
display: inline-block;    
padding: 12px 24px;    
font-size: 1rem;    
color: #fff;    
background: linear-gradient(135deg, #6a11cb, #2575fc);    
border-radius: 30px;    
text-decoration: none;    
transition: all 0.3s ease;    
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);    
position: relative;    
overflow: hidden;    
}    
.button:hover {    
transform: translateY(-2px);    
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);    
}    
.button:active {    
transform: translateY(0);    
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);    
}    
/* 动画 */    
@keyframes fadeIn {    
from {    
opacity: 0;    
transform: translateY(20px);    
}    
to {    
opacity: 1;    
transform: translateY(0);    
}    
}    
@keyframes bounce {    
0%, 100% {    
transform: translateY(0);    
}    
50% {    
transform: translateY(-10px);    
}    
}    
</style>    
</head>    
<body>    
<div class="container">    
<img src="https://img.icons8.com/fluency/96/000000/internet.png" alt="Browser Icon" class="browser-icon">    
<h1>请使用浏览器打开</h1>    
<p>为了获得更好的体验，请复制链接并在浏览器中打开。</p>    
<a href="#" class="button">复制链接</a>    
</div>    
<script>    
// 检测是否在微信或手机QQ中打开    
function isWeixin() {    
return /MicroMessenger/i.test(navigator.userAgent);    
}    
function isQQ() {    
return /QQ/i.test(navigator.userAgent);    
}    
if (isWeixin() || isQQ()) {    
// 如果在微信或手机QQ中打开，显示提示信息    
document.querySelector(".container").innerHTML = `    
<img src="https://img.icons8.com/fluency/96/000000/internet.png" alt="Browser Icon" class="browser-icon">    
<h1>请使用浏览器打开</h1>    
<p>为了获得更好的体验，请点击右上角菜单，选择“在浏览器中打开”。</p>    
<a href="#" class="button">复制链接</a>    
`;    
}    
// 复制链接功能    
const button = document.querySelector(".button");    
button.addEventListener("click", (e) => {    
e.preventDefault();    
const url = window.location.href;    
navigator.clipboard.writeText(url).then(() => {    
alert("链接已复制到剪贴板！");    
}).catch(() => {    
alert("复制失败，请手动复制链接。");    
});    
});    
</script>    
</body>    
</html>