CSS是前端开发中必不可少的一部分，它可以让网页变得更加美观，同时也可以提高用户的交互体验。在这篇文章中，我们将为大家分享一些酷炫的CSS特效。

1. 阴影效果

.box {box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);/* 水平偏移量，垂直偏移量，模糊距离，阴影颜色 */}

2. 角标效果

.badge {position: relative;padding: 5px;background-color: red;color: #fff;border-radius: 50%;}.badge::after {content: "1";position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;background-color: red;color: #fff;text-align: center;line-height: 20px;border-radius: 50%;}

3. 渐变效果

.gradient {background-image: linear-gradient(to bottom right, #FF9A8D, #FF6A7D);}

4. 翻转效果

.flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;}.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;}.flip-card-back {transform: rotateY(180deg);}

5. 动画效果

.animated {animation: shake 0.5s infinite;}@keyframes shake {0% { transform: translateX(0); }25% { transform: translateX(-5px); }50% { transform: translateX(5px); }75% { transform: translateX(-5px); }100% { transform: translateX(0); }}