標題：CSS 3案例：創建具有動畫效果的文本框
CSS 3是當前Web開發中最流行的CSS框架之一，它提供了許多新的功能，例如動畫、漸變、邊框等，這些功能可以大大提高Web頁面的用戶體驗。在本文中，我們將介紹如何使用CSS 3創建具有動畫效果的文本框。
讓我們首先來看一個基本的文本框：
在這個文本框中，我們使用CSS3的input type="text"來設置它的輸入框樣式。我們可以使用CSS的媒體查詢來設置輸入框的寬度和高度，以及背景顏色和邊框樣式。下面是一個例子：
input[type="text"],
input[type="password"] {
width: 100%;
height: 20px;
padding: 2px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
/* 動畫效果 */
@keyframes rotate {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
在這個例子中，我們使用CSS的@keyframes規則來創建了一個旋轉的動畫效果。我們將動畫效果設置到了輸入框的輸入框元素上，通過設置transform屬性的旋轉角度和持續時間來控制動畫效果。
除了基本的輸入框之外，CSS 3還提供了許多其他的功能，例如動畫效果、偽元素等，這些功能可以大大簡化Web開發的流程。
下面是一個使用CSS 3創建偽元素的示例：
在這個文本框和按鈕中，我們使用CSS 3的button和input標簽來創建偽元素。我們可以使用CSS的媒體查詢來設置按鈕的背景顏色、邊框樣式、字體樣式等。下面是一個示例：
button,
input[type="text"] {
width: 100%;
height: 20px;
padding: 2px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
button {
animation: rotate 1s infinite;
input[type="text"] {
animation: rotate 1s infinite;
/* 動畫效果 */
@keyframes rotate {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
在這個例子中，我們使用CSS的@keyframes規則來創建了一個旋轉的動畫效果。我們將動畫效果設置到了按鈕和輸入框的輸入框元素上，通過設置transform屬性的旋轉角度和持續時間來控制動畫效果。
通過使用CSS 3，我們可以創建出許多具有動畫效果的文本框，這些效果可以大大提高用戶體驗，使得Web頁面更加美觀和易用。