Css3 吸附效果是一種利用Css3技術實現的網頁元素自動對齊、吸附的效果。吸附效果可以讓網頁元素間相互對齊，提升網頁的美觀度和可讀性，給用戶更好的體驗。 為了實現吸附效果，我們需要使用Css3的flexbox布局。在Html中，我們可以使用容器標簽來包裹要操作的元素，如下所示：

<div class="container">
<div class="item">first</div>
<div class="item">second</div>
<div class="item">third</div>
</div>

通過添加容器的類名和元素的類名來進行樣式的設置，如下所示：

.container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: teal;
}
.item:hover {
transform: scale(1.2);
}

上述代碼中，容器類名 .container 聲明了使用 flexbox 布局，justify-content 屬性用于設置元素在主軸上的對齊方式，space-evenly 屬性使得元素在主軸上均勻分布，align-items 屬性用于設置元素在交叉軸上的對齊方式，center 屬性使得元素在交叉軸上居中。元素類名 .item 聲明了元素的寬高和背景顏色，同時在鼠標懸停時使用 transform 屬性放大元素。 通過上述代碼，我們實現了一組自動對齊和吸附的元素，具有良好的美觀度和可讀性。同時，通過合理的樣式設置，我們可以自由地調整吸附效果的強度和方式，給用戶帶來更好的體驗。