CSS是我們在網頁設計過程中必不可少的一部分。有創意的CSS模板可以讓網頁看起來更動態、更美觀。在下面的代碼中，我們將介紹幾個有創意的CSS代碼模板。

/* 動態背景顏色 */
body {
background-color: #333;
animation: color-change 10s linear infinite;
}
@keyframes color-change {
0% { background-color: #333; }
50% { background-color: #6699CC; }
100% { background-color: #333; }
}

這個CSS模板可以讓背景顏色動態變化。通過使用循環動畫，我們讓網頁背景顏色從灰色到藍色再到灰色循環變換。

/* 點擊圖片縮放 */
img {
transition: transform .3s ease;
}
img:hover {
transform: scale(1.1);
}

這個CSS模板可以讓圖片在鼠標懸浮時縮放。通過使用transition屬性，實現從未縮放到縮放的平滑過渡。

/* 立體按鈕 */
button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
position: relative;
z-index: 0;
overflow: hidden;
transition: color .3s ease;
}
button:before, button:after {
content: "";
position: absolute;
background: #6699CC;
z-index: -1;
transition: transform .3s ease;
}
button:before {
top: -50%;
left: -50%;
width: 100%;
height: 100%;
transform: rotate(45deg);
}
button:after {
bottom: -50%;
right: -50%;
width: 100%;
height: 100%;
transform: rotate(45deg);
}
button:hover {
color: #6699CC;
}
button:hover:before {
transform: rotate(0);
}
button:hover:after {
transform: rotate(0);
}

這個CSS模板可以讓按鈕看起來更立體化。通過使用:before和:after偽元素和transform屬性，我們的按鈕看起來像是有一層立體效果的設計。