如果您想為您的網站添加一個浪漫的連鎖反應,讓愛意充斥其中,您可以考慮使用 CSS 愛心動畫。在這篇文章中,我們將簡要介紹如何使用 CSS 實現這一效果。
/*創建一個 heart 類,寬高都為 100px,背景顏色為紅色*/ .heart { width: 100px; height: 100px; background-color: red; margin: 0 auto; position: relative; animation: beat .5s infinite both; } /*為愛心元素添加偽類使其變成畫布*/ .heart::before, .heart::after { content: ""; background-color: red; border-radius: 50px 50px 0 0; position: absolute; } /*給愛心左右兩側分別添加兩個橢圓*/ .heart::before { width: 100px; height: 100px; top: -50px; left: 0; } .heart::after { width: 100px; height: 100px; top: 0; left: 50px; } /*創建一個放大和縮小的beat動畫*/ @keyframes beat { 0% { transform: scale(1); } 100% { transform: scale(1.3); } }
以上代碼將創建一個紅色的愛心元素,其中包括兩個橢圓形,用作愛心左右兩側。動畫效果將在 .heart 類被賦予一個動畫名稱時實現,并持續運行。
希望您喜歡這個浪漫的愛心動畫!