CSS是前端開發中常用的一種語言，它可以為網站添加各種動態特效，使網站更加生動有趣。在CSS中，有許多經典的特效動畫，下面介紹幾種比較常見的。

/* 1.瞳孔跟隨鼠標移動 */
.eye {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
overflow: hidden;
}
.pupil {
position: absolute;
top: 33%;
left: 33%;
width: 34%;
height: 34%;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%);
transition: transform .4s;
}
.eye:hover .pupil {
transform: none;
}

這種動畫實現的效果是瞳孔跟隨鼠標動態移動，為網站提供了更加生動的效果。

/* 2.懸浮放大圖片 */
.img-box {
position: relative;
overflow: hidden;
}
.img {
display: block;
position: relative;
width: 100%;
height: 100%;
transition: transform .5s ease;
transform: scale(1);
}
.img:hover {
transform: scale(1.2);
}

這種動畫實現的效果是懸浮放大圖片，為網站添加了更加舒適的用戶體驗。

/* 3.旋轉的立方體 */
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation: rotateCube 10s linear infinite;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: rgba(255, 255, 255, .8);
}
.cube .front {
transform: translateZ(100px);
}
.cube .back {
transform: rotateY(180deg) translateZ(100px);
}
.cube .left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotateCube {
from {
transform: rotateY(0deg) rotateX(0deg);
}
to {
transform: rotateY(360deg) rotateX(360deg);
}
}

這種動畫實現的效果是旋轉的立方體，為網站添加了更加震撼的效果。