问题:
首页为登录页面,在登录页面显示之前,页面首先显示:页面为黑色,一道闪电劈过,页面随之裂开,裂开的两部分有动态的消失(从闪电光亮处往页面边缘掀开),(随着掀开)然后登陆界面就显示出来了。
这种特效怎么做出来啊?求前辈指点、求代码!!!
在此感谢!!!
问题:
首页为登录页面,在登录页面显示之前,页面首先显示:页面为黑色,一道闪电劈过,页面随之裂开,裂开的两部分有动态的消失(从闪电光亮处往页面边缘掀开),(随着掀开)然后登陆界面就显示出来了。
这种特效怎么做出来啊?求前辈指点、求代码!!!
在此感谢!!!
该回复引自免费微信小程序-皆我百晓生:
以下是一个简单的示例代码,实现了你描述的特效效果:
<!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秒后隐藏整个特效容器,显示登录界面。
你可以根据需要自定义样式和登录表单内容。请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。