制作一个关于永劫无间的web页面,需要采用动态效果,当点击进入按键的时候可以切换到永劫无间官方网站,并给出详细代码
时间: 2024-02-23 21:57:11 浏览: 242
页面动态效果
好的,我将为你提供一个简单的示例代码,用于制作一个关于永劫无间的web页面,包括动态效果和点击进入按钮。当点击进入按钮时,页面将跳转到永劫无间官方网站。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>永劫无间</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-Z9xT+L0XxSxhQs3z6RQYKZGm3rL6KtR0c+PfBuqV4A9u9m3wG8vI5VrTq6J6mT7W0r6zNZxXqvN4qKzYtJU+Uw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
<style type="text/css">
body {
background-color: #252525;
}
.container {
margin-top: 50px;
}
.title {
color: #f1c40f;
font-size: 60px;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
animation: pulse 2s infinite;
}
.subtitle {
color: #fff;
font-size: 30px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
animation: fadeInUp 2s;
}
.btn-enter {
background-color: #f1c40f;
border-color: #f1c40f;
color: #252525;
font-size: 18px;
font-weight: bold;
padding: 15px 30px;
margin-top: 50px;
animation: fadeIn 2s;
}
.btn-enter:hover {
background-color: #fff;
border-color: #f1c40f;
color: #f1c40f;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes fadeInUp {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="title animated">永劫无间</h1>
<h2 class="subtitle animated">一个神秘的世界等待你的探索</h2>
<button class="btn btn-enter animated" onclick="enter()">进入</button>
</div>
<script type="text/javascript">
function enter() {
window.location.href = "https://www.yongheiwujian.com";
}
</script>
</body>
</html>
```
这份代码使用了Bootstrap和Animate.css框架,以及一些自定义的CSS样式。其中,动态效果使用了Animate.css提供的动画效果库,点击进入按钮使用JavaScript编写了点击事件,实现了页面跳转。
注意:这份代码中的样式和动画效果只是示例,请根据实际情况进行修改和调整。同时,页面跳转的目标网站需要根据实际情况进行修改。
希望这份代码能够对你有所帮助!
阅读全文