CSS 中心點切換是一種常用的樣式切換效果，它可以讓用戶點擊不同的按鈕來切換不同的內(nèi)容。下面是一個實例演示如何通過設置 CSS 中心點實現(xiàn)切換效果。

.container {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all .5s ease-in-out;
}
#item1 {
background-color: red;
}
#item2 {
background-color: blue;
}
.item.active {
opacity: 1;
}

以上是 CSS 代碼，使用了一個父容器和兩個子元素，分別是 #item1 和 #item2。兩個子元素的位置都被設置為居中，并且使用了一個 active 類來切換顯示狀態(tài)。

現(xiàn)在讓我們繼續(xù)看看 HTML 代碼：

<div class="container">
<div id="item1" class="item active">
<p>這是第一個項目</p>
</div>
<div id="item2" class="item">
<p>這是第二個項目</p>
</div>
</div>

這里我們將父容器 class 設置為 container，兩個子元素的 id 分別為 item1 和 item2，其中 item1 的 class 設置為 active，表示默認顯示第一個項目。

最后，我們需要添加一些 JavaScript 代碼來實現(xiàn)切換效果：

const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');
container.addEventListener('click', e =>{
const target = e.target;
if (target.tagName === 'DIV' && target.classList.contains('item')) {
for (let i = 0; i < items.length; i++) {
if (items[i] === target) {
items[i].classList.add('active');
} else {
items[i].classList.remove('active');
}
}
}
});

代碼中我們使用了事件委托，當用戶點擊父容器時，判斷當前點擊的是哪一個子元素，然后再根據(jù)子元素的 class 來切換顯示狀態(tài)。

這里就是 CSS 中心點切換的完整實例代碼，可以用它作為參考來實現(xiàn)自己的樣式切換效果。