html5酷炫表白代码_520程序员表白方式,调皮弹窗表白代码,网友:跪求源码
时间: 2023-12-12 21:47:33 浏览: 158
以下是一个简单的HTML5表白代码示例,其中包含弹窗效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>520表白</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: #f7f7f7;
font-family: Arial, sans-serif;
}
.container {
width: 400px;
margin: 50px auto;
background: #fff;
padding: 20px;
text-align: center;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
h1 {
font-size: 36px;
color: #f00;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #f00;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
margin-top: 20px;
transition: all 0.3s ease;
cursor: pointer;
}
.btn:hover {
background: #800000;
}
</style>
</head>
<body>
<div class="container">
<h1>亲爱的XXX:</h1>
<p>今天是520,我想对你说......</p>
<button class="btn" onclick="showDialog()">点击查看表白</button>
</div>
<div id="dialog" style="display: none;">
<div class="container">
<h1>我喜欢你,愿意做你的程序员小伙伴!</h1>
<p>520快乐!</p>
<button class="btn" onclick="hideDialog()">关闭</button>
</div>
</div>
<script type="text/javascript">
function showDialog() {
document.getElementById('dialog').style.display = 'block';
}
function hideDialog() {
document.getElementById('dialog').style.display = 'none';
}
</script>
</body>
</html>
```
在此示例中,我们使用了一个DIV元素来创建弹出窗口。初始情况下,该元素被设置为隐藏。当用户单击“点击查看表白”按钮时,JavaScript函数showDialog()将被调用,以显示该元素。同样,当用户单击“关闭”按钮时,JavaScript函数hideDialog()将被调用,以隐藏该元素。
请注意,这只是一个简单的示例。如果您想要更多的交互性和动画效果,您可能需要使用JavaScript或CSS动画库等其他技术来实现。
阅读全文