_node 2013-09-11 07:36 采纳率: 0%
浏览 1264

做一个特炫的html5特效

问题：

首页为登录页面，在登录页面显示之前，页面首先显示：页面为黑色，一道闪电劈过，页面随之裂开，裂开的两部分有动态的消失（从闪电光亮处往页面边缘掀开），（随着掀开）然后登陆界面就显示出来了。
这种特效怎么做出来啊？求前辈指点、求代码！！！
在此感谢！！！

  • 写回答

1条回答

  • 专家-赤兔[在线] 全栈领域优质创作者 2023-09-27 11:08
    关注

    该回复引自免费微信小程序-皆我百晓生:

    以下是一个简单的示例代码，实现了你描述的特效效果：

    <!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
  <style>
    body {
      background-color: black;
      overflow: hidden;
    }
    #container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #left, #right {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background-color: black;
      animation: split 1s ease-in-out forwards;
    }
    #left {
      left: 0;
      transform-origin: right;
    }
    #right {
      right: 0;
      transform-origin: left;
    }
    @keyframes split {
      0% {
        transform: scaleX(0);
      }
      50% {
        transform: scaleX(1);
      }
      100% {
        opacity: 0;
      }
    }
    #login {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id='container'>
    <div id='left'></div>
    <div id='right'></div>
  </div>
  <div id='login'>
    <!-- 登录表单内容 -->
  </div>
  <script>
    setTimeout(function() {
      document.getElementById('container').style.display = 'none';
    }, 2000);
  </script>
</body>
</html>

    这段代码使用了CSS动画和JavaScript定时器来实现特效。页面加载后，通过CSS动画将页面分为左右两部分，并使其逐渐消失。然后，通过JavaScript定时器在2秒后隐藏整个特效容器，显示登录界面。

    你可以根据需要自定义样式和登录表单内容。请注意，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。

    评论

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器