如果你想讓你的網頁變得更具有藝術感,你可以嘗試用CSS來創建一個心形圖片墻。這個效果會讓你的網頁更加的有趣和引人入勝。
.heart { width: 100px; height: 80px; position: relative; animation: heartbeat 1s linear infinite both; } .heart:before, .heart:after { content: ""; position: absolute; top: 0; left: 50px; width: 50px; height: 80px; border-radius: 50px 50px 0 0; background-color: red; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(0.8); } 50% { transform: scale(1.2); } 100% { transform: scale(0.8); } }
以上是關于CSS代碼的說明,下面我們來看一下html代碼:
<div class="heart"></div>
創建一個div元素,設置其中的class為“heart”即可,這是我們的心形圖片墻的主要標志。
現在你已經知道如何使用CSS來創建一個心形圖片墻,趕緊動手試試吧!你一定會驚訝于這個簡單而又精美的效果。
上一篇css徑向漸變 百分比
下一篇css影響網站排名