火星粒子是一款非常炫酷的CSS3動效,它可以讓網頁上的元素像漂浮在太空中的火星粒子一樣。這個動效的實現方式是使用CSS3的transform、animations等屬性,同時也用到了JavaScript的一些基礎知識。
下面是該動效的主要代碼:
.mars{ position: absolute; width: 10px; height: 10px; background-color: red; border-radius: 50%; box-shadow: 0 0 10px 2px red; animation: mars 3s linear infinite; } @keyframes mars{ from{ transform: translate(0, 0) rotate(0); } to{ transform: translate(500px, 500px) rotate(720deg); } }
我們可以將這段代碼放在頁面的style標簽內,然后在HTML中使用div標簽來創建元素,給元素添加mars類名即可實現動效。
使用這個火星粒子動效可以為網站增添一份獨特的味道,讓頁面看起來更加新穎和流行。
上一篇css設置點虛線邊框
下一篇氣球飛走用CSS實現