HTML愛(ài)心特效代碼文檔
HTML是創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)語(yǔ)言之一,可以通過(guò)HTML代碼添加各種動(dòng)態(tài)和靜態(tài)的效果。其中愛(ài)心特效在表達(dá)浪漫情感的頁(yè)面中非常流行。下面是實(shí)現(xiàn)愛(ài)心特效的HTML代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML愛(ài)心特效</title> <style> .heart { height: 50px; width: 50px; position: relative; animation: animateHeart 0.75s ease-out infinite; } .heart:before, .heart:after { content: ""; background-color: #fc2d4a; border-radius: 25px 25px 0 0; height: 45px; width: 28px; position: absolute; transform: rotate(-45deg); top: 0; left: 11px; } .heart:after { transform: rotate(45deg); left: 12px; } @keyframes animateHeart { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html>
這段代碼中,定義了一個(gè)CSS類名為"heart",它包含了三個(gè)元素:一個(gè)主心和兩個(gè)小心。整體使用CSS動(dòng)畫(huà)將其閃爍。在HTML頁(yè)面中添加這段代碼即可實(shí)現(xiàn)HTML愛(ài)心特效。