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

以上就是我們為大家帶來的一些CSS特效，希望對大家有所幫助。