CSS3點贊加一效果已經成為了現代網站設計中不可或缺的一部分。這個效果能夠在用戶點贊的同時實現一個動畫效果，增加頁面的交互性和美觀性。下面是一個簡單的CSS3點贊加一效果的實例。

html:
<div class="like"></div><a href="#" class="like-btn"></a>CSS:
.like {
width: 50px;
height: 50px;
background: #ccc;
border-radius: 50%;
position: relative;
margin: 100px auto;
}
.like:before {
content: '';
width: 20px;
height: 20px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all .5s;
}
.like-btn {
display: block;
width: 100px;
height: 50px;
background: #3498db;
text-align: center;
line-height: 50px;
color: #fff;
text-decoration: none;
border-radius: 5px;
position: relative;
margin: 50px auto;
}
.like-btn:before {
content: '';
width: 30px;
height: 30px;
background: #fff;
position: absolute;
top: 10%;
left: -10%;
border-radius: 50%;
transform: scale(0);
transition: all .5s;
}
.like-btn:after {
content: '';
width: 30px;
height: 30px;
background: #fff;
position: absolute;
top: 10%;
right: -10%;
border-radius: 50%;
transform: scale(0);
transition: all .5s;
}
.like-btn:active:before, .like-btn:active:after {
transform: scale(1);
}
.like-btn:before {
transform-origin: bottom right;
}
.like-btn:after {
transform-origin: bottom left;
}
.like-btn.clicked:before, .like-btn.clicked:after {
transform: scale(1);
}
.like-btn.clicked:before {
animation: animateToLeft .5s linear both;
}
.like-btn.clicked:after {
animation: animateToRight .5s linear both;
}
@keyframes animateToLeft {
0% {
transform: scale(1) rotate(0);
}
100% {
transform: scale(.3) rotate(270deg);
}
}
@keyframes animateToRight {
0% {
transform: scale(1) rotate(0);
}
100% {
transform: scale(.3) rotate(-270deg);
}
}

在上面的代碼中，我們使用了偽元素:before和:after，以及CSS3的動畫效果來實現點贊加一的動畫效果。具體來說，我們首先定義了一個圓形容器.like，然后定義了一個類like-btn來表示點贊按鈕。在點贊按鈕被點擊時，通過添加類clicked，我們就可以移動圓形元素.like的中心點，并通過動畫的方式實現贊加一效果。

總結來說，CSS3點贊加一效果是現代網站設計中的一個重要組成部分，它能夠增強網站的交互性和美觀性。在實現點贊加一效果時，我們可以通過使用偽元素和CSS3動畫效果來實現。