CSS3是前端設計師必備的技能之一，當然，其強大的動漫效果更是吸引人的關注點之一。以下是一些CSS3動漫代碼的例子，希望可以給大家?guī)盱`感。

/* 1. 水波紋動畫 */
button {
outline: none;
border: none;
background: #336699;
color: white;
border-radius: 50%;
padding: 16px 40px;
position: relative;
overflow: hidden;
transform: translate(0, 0);
}
button:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
opacity: 0;
transition: width 0.3s ease, height 0.3s ease, opacity 0.5s ease;
}
button:hover:after {
width: 300px;
height: 300px;
opacity: 1;
}
/* 2. 文字描邊動畫 */
h1 {
text-align: center;
color: #fff;
margin: 30px 0;
text-shadow: 0px 0px 20px #000, 0px 0px 30px #000, 0px 0px 40px #000;
animation: animTextShadow 2s ease-in-out infinite alternate;
}
@keyframes animTextShadow {
0% {
text-shadow: 0px 0px 40px #000, 0px 0px 60px #000, 0px 0px 80px #000;
}
100% {
text-shadow: 0px 0px 20px #000, 0px 0px 30px #000, 0px 0px 40px #000;
}
}
/* 3. 旋轉動畫 */
img {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

以上是三種常用的CSS3動漫代碼，通過這些例子，可以看出CSS3的動漫功能的強大性能。不僅可以為頁面增加更多的特效，而且對于網(wǎng)站的交互和用戶體驗也有著重要的貢獻。希望大家可以在實踐中學習更多的CSS3動漫代碼技巧。