vue笔记

最新推荐文章于 2024-09-02 17:34:07 发布

Creampudding

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量122

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/Creampudding/article/details/119996588

版权

这篇博客主要介绍了在Vue项目中如何使用vue-particles实现粒子动画，并将其作为背景；其次，展示了如何通过Echarts创建折线图，包括安装和全局引入的步骤；最后，探讨了利用vue-lazyload实现图片的懒加载功能，包括安装、配置和在模板中的使用方法。

摘要由CSDN通过智能技术生成

使用vue中使用动画vue-particles，完成粒子动画

<vue-particles
  color="#dedede"
  :particleOpacity="0.7"
  :particlesNumber="40"
  shapeType="star"
  :particleSize="4"
  linesColor="#FFFFFF"
  :linesWidth="2"
  :lineLinked="true"
  :lineOpacity="0.4"
  :linesDistance="150"
  :moveSpeed="3"
  :hoverEffect="true"
  hoverMode="grab"
  :clickEffect="true"
  clickMode="push"
  class="cash"
>
</vue-particles>

直接放入展示的div中使用,如果想让其当做背景，不影响页面其他的地方的效果，可以通过他的唯一id设置css样式进行编辑

#particles-js{
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}

但是加了还行不想，只需要在有效果的地方加入

position: relative;

vue使用Echart来实现页面中折线图

官网地址：https://

最低0.47元/天解锁文章

Creampudding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记

使用vue中使用动画vue-particles，完成粒子动画<vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="40" shapeType="star" :particleSize="4" linesColor="#FFFFFF" :linesWidth="2" :lineLinked="true" :lineOpacity="0.4" :linesDistance
复制链接

扫一扫