CSS3動畫是前端開發中非常重要的技術之一,能夠為網頁增添更加豐富的交互效果和視覺體驗。同時,在前端開發的面試中,CSS3動畫相關的面試題也是非常常見的。
以下是一些CSS3動畫相關的面試題:
1. 如何實現一個懸浮效果? 代碼示例: .box:hover { /* 實現懸浮效果的代碼 */ } 2. 如何讓一個元素在指定時間內向左移動100px,然后停止? 代碼示例: .box { animation: move-left 1s linear forwards; } @keyframes move-left { 100% { transform: translateX(-100px); } } 3. 如何讓一個元素在指定時間內向左移動100px,然后往右反彈50px,最后回到原始位置? 代碼示例: .box { animation: move-left-right 1s ease-in-out forwards; } @keyframes move-left-right { 0% { transform: translateX(0); } 50% { transform: translateX(-100px); } 75% { transform: translateX(-50px); } 100% { transform: translateX(0); } }
除了上述面試題,CSS3動畫還有許多其他的應用。掌握好這些技能不僅可以讓你的網頁更具有吸引力,也能在前端開發中有更大的發展空間。