HTML5畫心代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML5畫心</title>
<style>
#heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(45deg);
}
#heart::before {
content: "";
position: absolute;
top: 0;
left: 50px;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
background-color: #F66;
transform: rotate(-45deg);
}
#heart::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
background-color: #F66;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="heart"></div>
</body>
</html>以上為HTML5畫心的代碼，具體實現(xiàn)方法如下：
首先，在HTML文件中定義id為“heart”的div元素。
<div id="heart"></div>
然后，通過CSS樣式控制該div元素及其before和after偽類的屬性。
#heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(45deg);
}
#heart::before {
content: "";
position: absolute;
top: 0;
left: 50px;
width: 50px;
height: 80px;
border-radius:50px 50px 0 0;
background-color: #F66;
transform: rotate(-45deg);
}
#heart::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 80px;
border-radius:50px 50px 0 0;
background-color: #F66;
transform: rotate(-45deg);
}其中，#heart表示選中id為“heart”的div元素，然后通過寬度、高度以及變換等屬性控制元素的形態(tài)；而#heart::before和#heart::after表示選中div元素的偽類before和after，然后通過絕對定位、大小、圓角和顏色等屬性控制心形的兩部分。其中“::”表示偽類的意思，即在選中元素后添加一些樣式或內(nèi)容。
最后，在HTML文件中添加以上代碼即可畫出一個紅色的心形。
上一篇html5畫桌子代碼