CSS中文字抖動是一種動態效果,可以使網頁中的文字產生震動的視覺效果。
.text-shake { animation: shake 0.5s ease-in-out infinite; } @keyframes shake { 0% { transform: translateX(0); } 10% { transform: translateX(-5px); } 20% { transform: translateX(5px); } 30% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 50% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 70% { transform: translateX(-3px); } 80% { transform: translateX(3px); } 90% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }
在上面的代碼中,我們采用了CSS3的animation動畫特性,通過定義一個shake的keyframes關鍵幀動畫,在0%到100%的時間內,利用transform的translateX屬性改變文字的位置,使其產生震動的效果。
同時,我們可以利用infinite趨近于無限循環的屬性,讓震動效果能夠一直持續展示。需要注意的是,由于動畫是通過改變文字位置實現的,所以在應用到文字上時,需要將字體的大小、顏色等屬性同樣定義好,并將字體的大小設置為像素(px)單位。
通過使用CSS中文字抖動效果,可以為網頁增添更多的動態效果,使其更具吸引力和趣味性。
上一篇mysql最小值對照表