CSS可以實現很多有趣的效果,其中正玄運動效果就是一種常見的動態效果,通過CSS可以輕松實現正玄運動效果。
.box { width: 100px; height: 100px; background-color: #ccc; position: relative; animation: sin 2s infinite alternate; } @keyframes sin { from { left: 0; top: 0; } to { left: 200px; top: 100px; } /* 正玄函數的函數圖像為 sin(x), * 周期為 2π,可以通過 sin 動畫來模擬正玄運動。 */ 50% { left: 100px; top: calc(100px + sin(1.57) * 50px); } }
在上面的代碼中,通過設置關鍵幀動畫來實現正玄運動效果,關鍵幀動畫由兩個關鍵幀組成,from關鍵幀表示動畫開始時的狀態,to關鍵幀表示動畫結束時的狀態。
另外,我們在動畫中設置了一個50%的關鍵幀,通過調整top屬性的值來實現正玄運動,其中sin函數表示正玄函數,1.57是π/2的近似值,50px是正玄函數在y軸上的系數。
最后,請注意需要將元素的position屬性設置為relative或者absolute,這樣才能通過left和top屬性來實現元素的移動。
上一篇css 做的登陸頁面模板
下一篇css 偶數行樣式