淘先锋技术网

首页 1 2 3 4 5 6 7

html爱心日蚀代码

HTML爱心日蚀代码

<!DOCTYPE html>
<html>
<head>
<title>HTML爱心日蚀代码</title>
</head>
<body>
<div style="font-size: 30px;"><i class="fa fa-heart" style="color: #f00;"></i></div>
<div style="font-size: 30px; margin-top: -22px; position: relative;"><i class="fa fa-heart" style="color: #f00;"></i></div>
<div style="margin-top: -22px; position: relative;">
<i class="fa fa-heart" style="color: #f00; transform: rotate(45deg);"></i>
<i class="fa fa-heart" style="color: #f00; transform: rotate(-45deg);"></i>
</div>
</body>
</html>

注解:

1、首先需要导入 Font Awesome 矢量图标库的 CSS：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2、分三个 div 分别显示三个红色的心形，第一个和第二个相距较远，为了实现叠加效果，需要设置 margin-top、position 和 transform 属性。

3、最后一个 div 中的两个心形需要旋转，使之变成日蚀效果。

4、爱心是通过 Font Awesome 矢量图标实现的。