html表白特效源代码
时间: 2023-11-05 12:02:48 浏览: 97
html表白特效源代码《浪漫的html表白源代码,html表白网页制作源码》
5星 · 资源好评率100%
HTML表白特效源代码通常是通过使用CSS和JavaScript来实现的。下面是一个简单的示例代码:
HTML部分:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表白特效</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heart"></div>
<button class="btn">点击表白</button>
<!-- 引入JavaScript -->
<script src="script.js"></script>
</body>
</html>
```
CSS部分,可以放在style.css文件中:
```css
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
.heart {
width: 100px;
height: 100px;
background-color: #ff4d4d;
position: relative;
transform: rotate(45deg);
}
.btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border-radius: 3px;
background-color: #4d89ff;
color: #fff;
border: none;
}
```
JavaScript部分,可以放在script.js文件中:
```javascript
// 获取DOM元素
const heart = document.querySelector('.heart');
const btn = document.querySelector('.btn');
// 监听按钮点击事件
btn.addEventListener('click', () => {
// 添加动画效果
heart.style.animation = 'heartbeat 0.8s infinite';
// 弹出表白消息
alert('我喜欢你!');
});
```
这段代码会在页面上创建一个红色的心形元素,并附带一个“点击表白”的按钮。当点击按钮时,心形元素会开始心跳的动画效果,并弹出一个消息框表白。
阅读全文