淘先锋技术网

首页 1 2 3 4 5 6 7

大家好,今天我来分享一个带有爱心的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爱心源码能够为大家的网页添加一份情趣,谢谢!