CSS可以實現元素左右運動,可以通過以下步驟來實現:
/* 第一步:定義運動的元素 */ .element { position: relative; /* 確保元素是相對定位的,從而可以在其位置上進行移動 */ left: 0px; /* 開始時元素在左邊,left是0 */ } /* 第二步:定義運動的動畫 */ @keyframes move { from { /* 元素從左邊開始移動 */ left: 0px; } to { /* 元素到右邊停止運動 */ left: 100px; } } /* 第三步:應用動畫 */ .element { animation-name: move; /* 使用之前定義好的move動畫 */ animation-duration: 1s; /* 運動時間為1秒 */ animation-iteration-count: infinite; /* 無限循環運動 */ animation-direction: alternate; /* 元素反向運動,實現左右往返 */ }
通過以上步驟,我們就可以實現元素左右運動。
上一篇css實現元素水平居中
下一篇css實現不規則漸變