520表白html5爱心代码.docx
需积分: 1 183 浏览量
2024-05-20
20:41:24
上传
评论
收藏 14KB DOCX 举报
下面是一个简单的 HTML5 和 CSS 代码示例，用于在网页上生成一个爱心形状，并搭配"520"
表白文字。请注意，HTML5 本身并不直接支持绘制复杂的图形，如爱心，但我们可以使用
CSS 的 border-radius 和 transform 属性来模拟这样的形状。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>520 表白爱心</title>
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before,
.heart::after {
position: absolute;
content: "";
top: 40px;
width: 52px;
height: 80px;
border-radius: 50px 50px 0 0;
background: red;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
资源评论
