用html + css3d制作一个表白页面
时间: 2023-11-28 17:50:07 浏览: 38
好的,下面是一个简单的示例,你可以根据自己的需求进行修改和优化。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表白页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box front">
<h1>我喜欢你</h1>
<p>你是我生命中最重要的人,我想把我的心交给你,与你携手走过每一天。</p>
</div>
<div class="box back">
<h1>愿意接受我的表白吗?</h1>
<button class="yes">YES</button>
<button class="no">NO</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>
```
CSS代码:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
perspective: 1000px;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
padding: 30px;
text-align: center;
transition: transform 0.5s ease;
backface-visibility: hidden;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
h1 {
font-size: 30px;
margin-bottom: 20px;
color: #f44336;
}
p {
font-size: 18px;
line-height: 1.5;
color: #333;
}
button {
display: block;
margin: 30px auto 0;
padding: 10px 20px;
background-color: #f44336;
border: none;
border-radius: 20px;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #d32f2f;
}
```
JavaScript代码:
```javascript
$('.box').on('click', function() {
$(this).toggleClass('front back');
});
$('.yes').on('click', function() {
alert('太好了,谢谢你接受我的表白!我们在一起吧!');
});
$('.no').on('click', function() {
alert('很遗憾,但我还是要说一句:我喜欢你!');
});
```
以上代码实现了一个简单的表白页面,点击页面的任意一处可以翻转卡片,点击YES和NO按钮可以弹出对应的提示框。你可以根据需要进行修改和优化。