CSS是前端開發中常用的一種語言，可以用來對網頁進行樣式的設計和美化。其中，通過CSS顯示加上動畫效果可以使網頁更加生動有趣，增加用戶的體驗感。

/* 基礎樣式 */
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
}
/* hover效果 */
.box:hover {
transform: scale(1.2);
transition: transform .3s;
}
/* 點擊效果 */
.box:active {
transform: scale(0.8);
transition: transform .3s;
}
/* 進入效果 */
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-color: rgba(255, 255, 255, .5);
opacity: 0;
transition: opacity .3s;
z-index: -1;
}
.box:hover::before {
opacity: 1;
}
/* 移動效果 */
.move {
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}

上述代碼展示了一些常見的CSS效果，包括hover（懸停）、active（點擊）、before（進入）、animation（移動）等。通過這些效果的運用，可以使網頁更加生動，吸引用戶的目光。