<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex, nofollow">
<title>CSS3仿携程旅行网404页面代码 - 脚本之家</title>
<style type="text/css">
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,em,button{margin:0;padding:0;}
body{font-size:12px;font-family:Simsun,sans-serif;color:#333;}
img,fieldset{border:0 none}
input,textarea{font-size:12px;}
textarea{resize:none;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#003d7e;text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,h5,h6{font-family:"Times New Roman",Simsun;}
ul,ol,li{list-style:none outside none;}
dfn{font-style:normal;}
.content,.errorinfo,#footer{width:800px;}
.logo,.tower,.cruise{background:url(images/un_pic.png) no-repeat;}
.wrap{background:#1158e7 url(images/404_bg.jpg) no-repeat center bottom;width:100%;overflow:hidden;}
.content{position:relative;z-index:1;height:480px;margin:0 auto;padding-top:100px;}
.logo{ position: relative;z-index:5; width:144px;height:54px;margin:0 auto;overflow:hidden;text-indent:-500px;background-position:0 0;}
.errorinfo{color:#fff;display:block;font-family:"microsoft yahei","simhei",sans-serif;font-size:24px;font-weight:normal;text-align:center;margin:30px auto;padding:0;}
a.goback{display:block;position: relative;z-index: 4; width:112px;margin:20px auto;padding:8px 0;color:#fff;font-family:"microsoft yahei","simhei",sans-serif;font-size:16px;text-align:center;text-decoration:none;background-color:#0f4dc5;}
a.goback:hover{background-color:#3f92f0;}
.tower{background-position:0 -127px;position:absolute;z-index:2;top:140px;left:20px;width:116px;height:264px;}
.towerlight{position:absolute;z-index:1;left:52px;top:166px;width:52px;height:52px;background-color:#fefa90;box-shadow:0 0 50px rgba(255,248,74,1);-webkit-animation:3s linear 0s none infinite light;-moz-animation:3s linear 0s none infinite light;animation:3s linear 0s none infinite light;}
@-webkit-keyframes light{
0%{box-shadow:0 0 50px rgba(255,254,165,1);}
50%{box-shadow:0 0 10px rgba(255,248,74,1);}
100%{box-shadow:0 0 50px rgba(255,254,165,1);}
}
@-moz-keyframes light{
0%{box-shadow:0 0 50px rgba(255,254,165,1);}
50%{box-shadow:0 0 10px rgba(255,248,74,1);}
100%{box-shadow:0 0 50px rgba(255,254,165,1);}
}
@keyframes light{
0%{box-shadow:0 0 50px rgba(255,254,165,1);}
50%{box-shadow:0 0 10px rgba(255,248,74,1);}
100%{box-shadow:0 0 50px rgba(255,254,165,1);}
}
.beam{position:absolute;z-index:3;left:-232px;top:75px;width:973px;height:198px;background:url(images/beam.png) no-repeat;-webkit-transform:rotate(15deg);transform:rotate(15deg);-webkit-transform-origin:308px 115px;transform-origin:308px 115px;-webkit-animation:10s linear 0s none infinite beam;-moz-animation:10s linear 0s none infinite beam;animation:10s linear 0s none infinite beam;}
@-webkit-keyframes beam{
0%{ -webkit-transform:rotate(15deg);}
50%{ -webkit-transform:rotate(65deg);}
100%{ -webkit-transform:rotate(15deg);}
}
@keyframes beam{
0%{transform:rotate(15deg);}
50%{transform:rotate(65deg);}
100%{transform:rotate(15deg);}
}
.wave1{position:relative;z-index:3;width:100%;margin-top:-220px;color:#999;background:url(images/bl.png) repeat-x 0 0;-webkit-animation:8s linear 0s none infinite tweenxx;-moz-animation:8s linear 0s none infinite tweenxx;animation:8s linear 0s none infinite tweenxx;}
.wave{height:220px;background:url(images/bl.png) repeat-x 330px 0;-webkit-animation:10s linear 0s none infinite tweenx;-moz-animation:10s linear 0s none infinite tweenx;animation:10s linear 0s none infinite tweenx;}
@-webkit-keyframes tweenx{
0%{background-position:0 0;}
100%{background-position:1600px 0;}
}
@-moz-keyframes tweenx{
0%{background-position:0 0;}
100%{background-position:1600px 0;}
}
@keyframes tweenx{
0%{background-position:0 0;}
100%{background-position:1600px 0;}
}
@-webkit-keyframes tweenxx{
0%{background-position:0 0;}
100%{background-position:-1600px 0;}
}
@-moz-keyframes tweenxx{
0%{background-position:0 0;}
100%{background-position:-1600px 0;}
}
@keyframes tweenxx{
0%{background-position:0 0;}
100%{background-position:-1600px 0;}
}
/*-----footer-----*/
#footer{margin:0 auto;
text-align:center;color:#0053aa;font-family:arial;line-height:1.6;padding:8px 0 0 0;}
#footer a{color:#0053aa;}
.copyright{color:#333333;}
/*-----media-----*/
@media screen and (max-width:640px) {
body{min-width:320px;}
.content,.errorinfo,#footer{width:320px;}
.content { height: 500px;padding-top: 20px;}
.errorinfo{font-size: 18px;}
.miscbox{position: relative;z-index: -1;height: 264px;width: 116px;margin: 0 auto;}
.tower{left: 0;top: 0; }
.towerlight {left: 32px;top: 30px;}
.beam {left: -255px;top: -62px;}
.wave1 {margin-top: -75px;}
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<a href="http://sc.chinaz.com/"><h1 class="logo">Ctrip</h1></a>
<div class="errorinfo">
<p>人在旅途，难免迷路，好在你有携程。</p>
<a class="goback" href="http:www.jb51.net/">返回首页</a>
</div>
<div class="miscbox">
<div class="tower"></div>
<div class="towerlight"></div>
<div class="beam"></div>
</div>
</div>
<div class="wave1"><div class="wave"></div></div>
</div>
</body>
</html>
纯CSS3实现的仿携程旅行网404页面效果源码.zip （5个子文件） 
132686970240160589 images 
bl.png 30KB un_pic.png 22KB beam.png 14KB
404_bg.jpg 44KB
index.html 5KB资源评论
易小侠
- 粉丝: 6634
- 资源: 9万+
最新资源
- Call The Roll.zip
- java课程设计-基于SSM框架的酒店客房管理系统源码+数据库脚本
- 9013,8550等SPICE模型
- 基于大数据、人工智能的招聘大数据分析展示系统-前端可视化.zip
- 具有执行器饱和及故障的航天器姿态主动容错控制；容错控制；航天器姿态；执行器故障及饱和
- (2025)Microsoft.WorldLockingTools插件Unity版本v2.7.3完整版（包括四个包）
- comsol复合材料各向异性相场模型，采用固体力学、亥姆霍兹pde接口，各向异性断裂能，提供mph文件
- matlab仿真，级联h桥储能变流器，下垂控制离网运行仿真，vsg控制，同步发电机控制，离网模式并网模式下均可以运行，可以实现预同步，实现平滑并网
- Flink流批一体数据处理快速集成开发框架 不仅能够快速构建基于Java的Flink流批一体应用程序，实现异构数据库实时同步和ETL，还可以让Flink SQL变得极其简单，玩转Flink
- 复旦大数据学院课程作业人工智能，分布式系统，自然语言处理，高级大数据解析，计算机网络，数据可视化.zip
- 单极倍频载波移相调制matlab仿真，9级联，19电平
- (2025)Unity图像识别包 OpenCV for Unity 2.6.0
- 大数据分析屏01234.zip
- Openmetadata之1.6.1最新版本安装-yellowcong
- 基于非奇异终端滑模控制的二自由度机械臂系统 1理论说明文档：进行机械臂轨迹跟踪控制器理论设计说明 2NTSMC控制：是通过引入非线性辅助项，将滑模控制器的终端项从奇异点(可能导致系统决策和切问
- 大数据存储与管理 (华中科技大学计算机科学与技术学院).zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
