使用css製作心形圖案並且新增動畫心動效果
阿新 • • 發佈：2020-07-28
個人部落格已經建好，歡迎各位前來訪問 http://mengyang.info/
純css製作心形圖案
首先製作一個正方形並且旋轉45度
.heart{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
效果如下:
然後新增前偽元素：
.heart::after{ background-color: pink; content:""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: 0; left: 25px; }
最後新增後偽元素：
.heart::before{
content: "";
background-color: pink;
border-radius: 50px;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0;
}
全部程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>心形制作</title> </head> <style> .heart{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate(-45deg); } .heart::after{ background-color: pink; content:""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: 0; left: 25px; } .heart::before{ content: ""; background-color: pink; border-radius: 50px; position: absolute; width: 50px; height: 50px; top: -25px; left: 0; } </style> <body> <div class="heart"> </div> </body> </html>