好看的安全跳转单页html源码

酷爱码

已于 2024-12-31 22:22:43 修改

阅读量5.3k

点赞数 39

分类专栏： html 文章标签： html 安全 javascript

于 2024-02-06 08:08:50 首次发布

本文链接：https://blog.youkuaiyun.com/huayula/article/details/136050851

版权

这篇文章介绍了一个使用HTML、CSS3和SVG实现的美观且安全的跳转页面效果，带有倒计时动画和安全提示，目标链接为QQ沐编程网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好看的安全跳转单页html源码,效果如下
在这里插入图片描述
代码如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if IE 8]><style>.ie8 .alert-circle,.ie8 .alert-footer{display:none}.ie8 .alert-box{padding-top:75px}.ie8 .alert-sec-text{top:45px}</style><![endif]-->
 <meta http-equiv="refresh" content="90;url=&#x0068;&#x0074;&#x0074;&#x0070;&#x0073;&#x003a;&#x002f;&#x002f;&#x0077;&#x0077;&#x0077;&#x002e;&#x0071;&#x0071;&#x006d;&#x0075;&#x002e;&#x0063;&#x006f;&#x006d;">

<title>正在跳转...</title>
<style>
body {
     
	margin: 0;
	padding: 0;
	background: #E6EAEB;
	font-family: Arial, '微软雅黑', '宋体', sans-serif
}
.alert-box {
     
	display: none;
	position: relative;
	margin: 96px auto 0;
	padding: 180px 85px 22px;
	border-radius: 10px 10px 0 0;
	background: #FFF;
	box-shadow: 5px 9px 17px rgba(102,102,102,0.75);
	width: 286px;
	color: #FFF;
	text-align: center
}
.alert-box p {
     
	margin: 0
}
.alert-circle {
     
	position: absolute;
	top: -50px;
	left: 111px
}
.alert-sec-circle {
     
	stroke-dashoffset: 0;
	stroke-dasharray: 735;
	transition: stroke-dashoffset 1s linear
}
.alert-sec-text {
     
	position: absolute;
	top: 11px;
	left: 190px;
	width: 76px;
	color: #000;
	font-size: 68px
}
.alert-sec-unit {