隨著前端技術的快速發展，基于 CSS 的交互效果越來越受到開發者們的重視。CSS 可以實現很多有趣且炫酷的交互效果，而不需要使用 JavaScript 或其他輔助框架。下面我們來看一些基于 CSS 的交互效果。
// 實現文字滑動效果，利用 CSS 的動畫和 transform 屬性
.text-slide {
overflow: hidden;
white-space: nowrap;
}
.text-slide >span {
display: inline-block;
padding-right: 100%;
animation: slide 1s steps(20, end) infinite;
}
@keyframes slide {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}上面這段代碼實現了一個有趣的文字滑動效果，當文字長度超出容器寬度時，文字會自動向左滑動。
// 點擊按鈕切換頁面背景顏色
.button {
padding: 10px 20px;
background-color: #ff4d4d;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color .3s ease;
}
.button:hover {
background-color: #ff8080;
}
.dark {
background-color: #333;
color: #fff;
}
.light {
background-color: #fff;
color: #333;
}上面的代碼實現了一個簡單的按鈕交互，點擊按鈕后可以切換頁面的背景顏色。這里利用了 CSS 的類選擇器和 JavaScript 的 DOM 操作，實現了切換背景顏色的功能。
這些只是基于 CSS 實現的一小部分交互效果，實際上還有很多有趣的、炫酷的效果可以用 CSS 來實現。而且使用 CSS 來實現交互效果可以減少 JavaScript 的使用，使頁面更加輕量級，并提升頁面的性能。因此，我們需要不斷學習和探索，發現更多有趣的 CSS 交互效果。
上一篇css過度速度