CSS實現左右擺動效果的方法很多,下面介紹其中一種。
首先,需要創建一個div元素作為容器。我們給這個容器設置寬度、高度、背景色和圓角,然后使用屬性position和left將其定位到屏幕左側。代碼如下:
<div class="container"></div> .container { width: 200px; height: 200px; background-color: #ccc; border-radius: 50%; position: absolute; left: -70px; }
接下來,我們需要實現擺動的動畫效果。我們可以使用CSS3中的@keyframes規則來定義動畫,然后使用animation屬性將其應用到容器上。這里我們定義一個名為swing的關鍵幀,讓容器不斷地沿著X軸左右擺動。代碼如下:
.container { animation: swing 2s ease-in-out infinite; } @keyframes swing { 0% { transform: translateX(-20px); } 50% { transform: translateX(20px); } 100% { transform: translateX(-20px); } }
最后,我們需要讓容器在擺動的同時保持在屏幕左側。我們可以使用transform屬性的translateX方法來實現X軸的平移效果,并使用position屬性的left方法將其定位到屏幕左側。代碼如下:
.container { position: absolute; left: -70px; animation: swing 2s ease-in-out infinite; } @keyframes swing { 0% { transform: translateX(-20px); left: -70px; } 50% { transform: translateX(20px); left: -50px; } 100% { transform: translateX(-20px); left: -70px; } }
現在,我們的左右擺動效果就完成了。可以根據實際需求調整容器的寬度、高度、擺動速度和幅度等參數,實現不同的效果。