网络建站知识

精准传达 • 价值共享

洞悉互联网前沿资讯，探寻网站营销规律

网站建设 > 网站建设 > 网络建站知识

查看其它板块

重庆网站建设分享一款好看的页面跳转源码

作者：Smileby陌少羽 | 2019-05-09 16:53 |点击：

跳转演示


演示图看不出效果  大家可以查看演示站


代码如下：



  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="0.1;url=https://pan.aoaoao.me">
  <meta charset="utf-8">
  <title>加载中</title>
  <script type="text/javascript">
  var msg = document.title;
  msg = "" + msg;pos = 0;
  function scrollMSG() {
  document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
  pos++;
  if (pos > msg.length) pos = 0
  window.setTimeout("scrollMSG()",200);
  }
  scrollMSG();
  </script>
  <style>body{overflow:hidden;background:#666}.container{display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden;animation-delay:1s}.item-1{width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eed968;margin:7px;display:flex;justify-content:center;align-items:center}@keyframes scale{0%{transform:scale(1)}50%,75%{transform:scale(3.5)}78%,100%{opacity:0}}.item-1:before{content:'';width:20px;height:20px;border-radius:50%;background-color:#eed968;opacity:.7;animation:scale 2s infinite cubic-bezier(0,0,0.49,1.02);animation-delay:200ms;transition:.5s all ease;transform:scale(1)}.item-2{width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eece68;margin:7px;display:flex;justify-content:center;align-items:center}@keyframes scale{0%{transform:scale(1)}50%,75%{transform:scale(3.5)}78%,100%{opacity:0}}.item-2:before{content:'';width:20px;height:20px;border-radius:50%;background-color:#eece68;opacity:.7;animation:scale 2s infinite cubic-bezier(0,0,0.49,1.02);animation-delay:400ms;transition:.5s all ease;transform:scale(1)}.item-3{width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eec368;margin:7px;display:flex;justify-content:center;align-items:center}@keyframes scale{0%{transform:scale(1)}50%,75%{transform:scale(3.5)}78%,100%{opacity:0}}.item-3:before{content:'';width:20px;height:20px;border-radius:50%;background-color:#eec368;opacity:.7;animation:scale 2s infinite cubic-bezier(0,0,0.49,1.02);animation-delay:600ms;transition:.5s all ease;transform:scale(1)}.item-4{width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eead68;margin:7px;display:flex;justify-content:center;align-items:center}@keyframes scale{0%{transform:scale(1)}50%,75%{transform:scale(3.5)}78%,100%{opacity:0}}.item-4:before{content:'';width:20px;height:20px;border-radius:50%;background-color:#eead68;opacity:.7;animation:scale 2s infinite cubic-bezier(0,0,0.49,1.02);animation-delay:800ms;transition:.5s all ease;transform:scale(1)}.item-5{width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#ee8c68;margin:7px;display:flex;justify-content:center;align-items:center}@keyframes scale{0%{transform:scale(1)}50%,75%{transform:scale(3.5)}78%,100%{opacity:0}}.item-5:before{content:'';width:20px;height:20px;border-radius:50%;background-color:#ee8c68;opacity:.7;animation:scale 2s infinite cubic-bezier(0,0,0.49,1.02);animation-delay:1000ms;transition:.5s all ease;transform:scale(1)}</style>
  </head>
  <body>
  <div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
  <div class="item-5"></div>
  </div>
  </body>
  </html>

如没特殊注明，文章均为狐灵科技原创,转载请注明   "重庆网站建设分享一款好看的页面跳转源码
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

Html js轻松实现 向上下左右循环滚动代码

下一篇———————

HTML a href标签 提交表单通过post方式
多一份免费策划方案，总有益处。

请直接添加技术总监微信联系咨询

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

联系狐灵科技，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：15082661954 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 15082661954 提交需求 官方微信 狐灵网络科技官方微信