HTML和CSS是網頁編程中最常用的兩種語言。它們可以幫助我們豐富網頁的設計和功能,讓網頁更加生動有趣。這里我們通過HTML和CSS來畫一個愛心。
<div class="heart"> <div class="left-heart"></div> <div class="right-heart"></div> </div> .heart { width: 200px; height: 200px; position: relative; } .heart::before, .heart::after { content: ""; position: absolute; left: 100px; top: 0; width: 100px; height: 160px; background: #fc2e68; transform: rotate(-45deg); transform-origin: 0 100%; } .heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } .left-heart { transform: translateX(-50%) translateY(-50%); } .right-heart { transform: translateX(50%) translateY(-50%); }
上述代碼中,我們使用了一個DIV標簽來作為整個愛心的容器,然后通過兩個DIV標簽來分別繪制左右兩半的愛心。通過設置::before和::after偽元素,我們可以分別設置愛心的左右兩側,然后使用transform屬性來實現旋轉。最后通過給左右兩邊設定transform屬性來實現愛心的居中顯示。這樣就完成了一個可愛的愛心圖案。