色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css心形圖片墻

江奕云1年前6瀏覽0評論

如果你想讓你的網頁變得更具有藝術感,你可以嘗試用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來創建一個心形圖片墻,趕緊動手試試吧!你一定會驚訝于這個簡單而又精美的效果。