大家好,今天我來分享一個帶有愛心的HTML源碼,大家可以直接復制使用在自己的網頁上。
<html>
<head>
<title>愛心示例</title>
<style type="text/css">
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before,
.heart::after {
position: absolute;
content: "";
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%;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
上述代碼實現了一個紅色愛心的效果,通過CSS的偽元素before和after實現葉子的形狀,并旋轉變形構成愛心的形狀。
如果大家想要更加自定義自己的愛心顏色或者大小,只需要修改對應的CSS屬性即可。
希望這個HTML愛心源碼能夠為大家的網頁添加一份情趣,謝謝!