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 矢量圖標實現的。
下一篇vue怎么遍歷集合