如果您想實現一個動態的頁面,可以使用CSS來定點旋轉多個圓。下面是一個示例代碼,您可以在自己的網頁中使用。
.circle { width: 100px; height: 100px; border-radius: 50%; position: absolute; } .circle1 { background-color: #e7e7e7; animation: rotate1 2s linear infinite; top: 50px; left: 50px; } .circle2 { background-color: #f44336; animation: rotate2 2s linear infinite; top: 10px; left: 10px; } .circle3 { background-color: #2196f3; animation: rotate3 2s linear infinite; top: 120px; left: 120px; } @keyframes rotate1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate2 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes rotate3 { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
這段代碼將創建三個不同的圓,每個圓都有不同的背景顏色,并使用@keyframes動畫屬性來實現旋轉。您可以嘗試修改圓的大小和位置以及動畫的屬性來創建自己的效果。這種方法可以使您的網頁更生動和有趣。
上一篇div 填充剩余
下一篇css定位查找元素位置