在網頁設計中,CSS是非常重要的一種語言,可以通過CSS控制網頁的樣式和布局。今天我想分享的是實現一直運動的CSS代碼,這種效果可以讓網頁元素持續運動從而吸引讀者的眼球。
/* 實現寬度不斷變化的動態效果 */ @keyframes width-change { 0% { width: 100px; } 50% { width: 200px; } 100% { width: 50px; } } div { animation: width-change 3s linear infinite; } /* 實現高度不斷變化的動態效果 */ @keyframes height-change { 0% { height: 100px; } 50% { height: 200px; } 100% { height: 50px; } } div { animation: height-change 3s linear infinite; } /* 實現內容不斷滾動的動態效果 */ @keyframes content-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } div { animation: content-scroll 5s linear infinite; } /* 實現循環旋轉的動態效果 */ @keyframes rotate { 100% { transform: rotate(360deg); } } div { animation: rotate 2s linear infinite; }
以上是四種常用的一直運動的CSS代碼,可以通過不同的代碼實現不同的動態效果。可以根據自己的需求和創意來進行修改,達到更好的效果。