CSS3是現代網頁設計中不可或缺的一種技術，它不僅能夠實現網頁的布局和排版，還能夠結合JavaScript實現動態效果和交互功能，今天我們就為大家分享一些CSS3趣味小實例。

首先，讓我們看看如何用CSS3實現一個有趣的動畫效果。以下代碼可以讓一個方格在頁面中不停地旋轉：

.square {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

下面，我們來嘗試一下如何用CSS3給文本添加一個漂亮的漸變色。以下代碼可以讓一段文字在水平方向上呈現從左到右的漸變色：

.gradient-text {
background: linear-gradient(to right, #EB5757, #FBE051);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 48px;
font-weight: 700;
}

最后，我們嘗試一下如何用CSS3實現一個有趣的菜單。以下代碼可以讓一個菜單以水平方向滑動展開：

.menu {
width: 200px;
background-color: #f1f1f1;
border-radius: 5px;
overflow: hidden;
transition: width 0.3s ease;
}
.menu:hover {
width: 300px;
}
.menu-item {
padding: 10px;
color: #000;
font-size: 16px;
border-bottom: 1px solid #ccc;
transition: all 0.3s ease;
}
.menu-item:hover {
background-color: #888;
color: #fff;
cursor: pointer;
}

以上就是我們為大家精選的CSS3趣味小實例，相信這些小例子能夠幫助大家更好地掌握CSS3的技巧和應用。