CSS粒子漩渦是一種很酷的效果,它可以讓你的網站或應用程序更具吸引力。通過使用CSS,可以實現一個漂亮的漩渦效果,吸引用戶的眼球。那么,如何實現CSS粒子漩渦呢?以下便是簡單的樣例代碼,使用pre標簽讓大家方便復制。
/* CSS代碼 */ .container { position: relative; width: 200px; height: 200px; overflow: hidden; } .particle { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background-color: #fff; opacity: 0.8; animation: particleMove 1s infinite linear; } @keyframes particleMove { 100% { transform: translateX(200px) rotate(720deg); } } .container .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background-color: #fff; box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5); }
上面的代碼包含了容器的樣式和粒子的樣式,以及動畫效果,在容器中添加了兩個粒子元素,這兩個元素會一起繞著中心的圓圈旋轉。使用container類可以輕松地將這些元素放到一個div中。粒子元素的位置由top和left屬性控制,動畫效果由keyframes屬性控制。
借助這些樣式和動畫效果,可以輕松的實現一個粒子漩渦效果,并且可以自定義樣式去制作各種形狀或效果的漩渦。希望這篇文章能夠有所幫助。