用html5写一个网页,含有会动的小心心
时间: 2023-12-14 18:02:21 浏览: 32
好的,以下是一个简单的 HTML5 代码,其中包含一个会动的小心心:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会动的小心心</title>
<style>
.heart {
position: relative;
animation: beat 1s ease-in-out infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 20px;
top: 0;
width: 20px;
height: 32px;
background-color: #FFC0CB;
border-radius: 20px 20px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes beat {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
你可以将这段代码复制到记事本中,然后将文件保存为 `.html` 文件。打开文件,你就可以看到一个会动的小心心了。
相关推荐
![](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)