html5制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备
时间: 2023-09-26 15:13:33 浏览: 61
以下是一个简单的 HTML5 爱心表白的代码,包括卡通人物和爱心形状浮动特效:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱心表白</title>
<style>
#cartoon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#heart {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
z-index: 0;
animation: heart-float 2s ease-in-out infinite;
}
@keyframes heart-float {
0% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-20px);
}
100% {
transform: translateX(-50%) translateY(0);
}
}
</style>
</head>
<body>
<div id="cartoon">
<img src="cartoon.png" alt="卡通人物">
<p>亲爱的,我喜欢你好久了,愿意和我在一起吗?</p>
</div>
<div id="heart">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100" height="100">
<path fill="#e91e63" d="M256 482.6L32 256 256 29.4l224 226.6L256 482.6z"/>
</svg>
</div>
</body>
</html>
```
在这个代码中,我们使用了一个 `#cartoon` 的 div 元素来包含卡通人物和表白信息,使用了一个 `#heart` 的 div 元素来包含爱心形状浮动特效。
爱心的形状由 SVG `<path>` 元素创建,并使用 CSS 动画实现浮动效果。爱心和卡通人物的位置使用了绝对定位,并使用了 `transform` 属性来居中和调整位置。
你可以使用自己的图片和信息来替换代码中的卡通人物和表白信息,制作出自己的爱心表白页面。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_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)