CSS屬性加點擊原點是一種常用的Web設計技巧，它能夠為用戶提供更好的交互體驗。下面我們來了解一下如何通過CSS屬性來實現這一效果。

.circle {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
cursor: pointer;
}
.circle::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.circle:hover::after {
opacity: 1;
}

首先，我們創建一個class為“circle”的div元素，設置它的寬高、圓角和背景顏色。并且將它的鼠標光標樣式設置為指針，以反映它是一個可點擊的對象。

接著，通過偽類“::after”來為該div元素添加一個圓形的原點，設置它的一些樣式屬性，比如絕對定位、尺寸、邊框半徑、居中對齊等等。

最后，通過“transition”屬性來設置圓形原點的透明度在鼠標懸停時漸變過渡，以達到一個有動畫效果的點擊原點的視覺效果。

這樣，我們就通過CSS屬性成功的實現了一個點擊原點的功能，可以為用戶帶來更好的界面交互體驗。