写一个520快乐的网页,要求用520是动态的,具有美感
时间: 2024-05-13 15:18:23 浏览: 11
好的,以下是一个简单的520快乐网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>520快乐</title>
<style>
body {
background-color: #F8F8F8;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 4em;
margin-top: 100px;
color: #FF69B4;
}
#heart {
display: inline-block;
margin-top: 50px;
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
content: "";
position: absolute;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
#text {
font-size: 2em;
margin-top: 50px;
color: #FF69B4;
}
#text:hover {
color: #DA70D6;
text-shadow: 0px 0px 10px #DA70D6;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Happy 520!</h1>
<div id="heart"></div>
<div id="text">点我!</div>
<script>
var heart = document.getElementById("heart");
var text = document.getElementById("text");
function animate() {
heart.style.animationName = "heartbeat";
heart.style.animationDuration = "1s";
heart.style.animationIterationCount = "infinite";
}
text.addEventListener("click", function() {
animate();
});
</script>
</body>
</html>
```
这个网页中,我们使用了一个CSS动画来让心形图案跳动,同时在文字上绑定了一个点击事件,点击后会触发动画。整个页面采用了粉色调,并使用了Arial字体,让页面看起来更加美观。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)