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 p {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);}}

这种动画实现的效果是旋转的立方体，为网站添加了更加震撼的效果。