HTML5動態(tài)特效愛心是一種非常流行的網(wǎng)頁設(shè)計技術(shù),它可以讓你的網(wǎng)頁更加生動有趣。下面是一個示例代碼:
<!DOCTYPE html> <html> <head> <title>HTML5動態(tài)特效愛心</title> <style> .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100px; width: 100px; } .heart:before, .heart:after { content: ""; position: absolute; background-color: #f00; border-radius: 50%; } .heart:before { top: -50px; left: 0; height: 100px; width: 100px; } .heart:after { top: 0; left: 50px; height: 100px; width: 100px; } .heart.beat { animation: beat 1s infinite; } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> <script> setInterval(function() { var heart = document.querySelector(".heart"); heart.classList.toggle("beat"); }, 500); </script> </body> </html>
這段代碼創(chuàng)建了一個紅色的愛心,在網(wǎng)頁中呼吸跳動。你可以把這段代碼嵌入到你的網(wǎng)頁中,來增加一些有趣的動態(tài)效果。