你喜歡頁面文字跳動的效果嗎?這個可以通過CSS實現,讓你的頁面更加生動有趣!
.text-jump{ animation: jump 1s infinite; } @keyframes jump{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-20px); } 100%{ transform: translateY(0); } }
通過以上代碼,我們在文本元素上應用了一個名為“jump”的動畫,并為其設置執行時間為1秒及無限循環。從0%到50%的時間段,文本元素將向上移動20像素,然后在50%到100%的時間段內向下移動回初始位置。
這只是跳動文字效果的其中一個實現方式,你可以根據自己的需求進行修改和定制。希望以上代碼可以幫助到你,讓你的網頁更加生動有趣!
下一篇lumen與vue