CSS左右動畫效果可使網站更有活力和吸引力。一下是一些代碼樣例:
/* 左右滑動效果 */ .slide-left-right { position: relative; } .slide-left-right:before { content: ''; position: absolute; top: 0; bottom: 0; left: -100%; width: 100%; background-color: rgba(0,0,0,0.5); transform: translateZ(0); transition: transform 0.3s ease-out; } .slide-left-right:hover:before { transform: translateX(100%); }
上述代碼通過:before偽元素,實現了鼠標懸停時左右移動的效果。具體表現為,當鼠標停留在指定元素上方時,偽元素從左側向右側平移。
/* 左右浮動效果 */ .float-left-right { animation: float-left-right 2s ease-in-out infinite; } @keyframes float-left-right { 0% { transform: translateX(-50px); } 50% { transform: translateX(50px); } 100% { transform: translateX(-50px); } }
上述代碼通過CSS的animation屬性,設置了一個往返運動的動畫。具體表現為,指定元素左右來回浮動。
以上兩種CSS左右動畫效果可以為項目注入更多元素,呈現更有吸引力的頁面效果。