AnimeJS 下雪

我喜欢雪花的复杂结构。哦,它们优雅地飘落,旋转着,翩翩起舞!今天就用 AnimeJS 来制造雪花吧!

正如其名称所示,这个库允许你为几乎任何东西制作动画:从 css 值和 dom 属性到变量。

让我们创建一个简单的 html 文件,例如“index.html”:



  
    
    
    Anime
  
  
    
  

我已经从 CDN 导入了库,但你当然可以使用包管理器添加它,例如“npm i animejs”,但你需要一个捆绑器,例如 Vite 才能使其与 html 一起工作。

在浏览器中打开“index.html”并欣赏雪花:

One snowflake in the middle of the screen

但一片雪花是不够的!让我们通过调整代码来添加更多雪花:

重新加载页面并欣赏降雪:

几乎完美,但还不够完美?似乎说不出还缺少什么?也许需要旋转或更复杂的路径?

我会把一切都交给你来完成,AnimeJS 可以做到这一切,而且文档读起来也很有趣。不要犹豫,分享你的创作吧!

喜欢这些内容,并且希望全年能有更多这样的内容吗?

Buy Me A Coffee