canvas-nest背景和上吊猫分享

快了，不要急

于 2024-03-26 11:38:59 发布

阅读量553

点赞数 7

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_69497411/article/details/137038293

版权

简介：

1.canvas-nest是一个基于canvas绘制的网页背景效果的插件，使用简单，但效果贼酷
如果你也想你的网页拥有这个背景效果

2.上吊猫是一个基于js和css3的样式，有回到顶端的效果

下面是分别展示其效果

canvas-nest

canvas-nest属性

绑定的config属性有四个属性值可以设置，分别是color、opacity、zIndex、count

color   的值为RGB的取值
opacity  是鼠标与各个点之间连线的透明值
zIndex 是特效显示的优先层级
count   是背景中漂浮点的数量

vue项目中引用

1.安装：

1.可以使用命令直接引入
npm i vue-canvas-nest
2.可以在Github上直接下载插件
Github：https://github.com/hustcc/canvas-nest.js

2.Vue使用
（按需引入到页面并注册组件，若所有页面都需要，可直接在App.vue页面引用）

<template>
<div id="elecData_father">
<vue-canvas-nest :config="config" :el="'#elecData_father'"></vue-canvas-nest>
</div>
</template>
说明：注意el绑定的是最外层父级的id

<script>
import vueCanvasNest from "vue-canvas-nest";

export default {
data() {
return {
//配置属性
config: {
color: "255, 255, 255",
opacity: 1,
zIndex: 5,
count: 99,
},//配置炫酷效果
}
},
components: {
vueCanvasNest
},
methods: {}
}
</script>

html使用

<!DOCTYPE>
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CanvasDemo</title>
</head>
<body>
<div id="cas" style="position: absolute;width: 200px;height: 200px; left: 200px; z-index: 99999;"></div>
<script src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js" type="text/javascript" color="255,0,0" opacity="0.5" count="200" ></script>
</body>
</html>

也可以离线使用 js文件源码已下载，想要可以私信我或者在我的上传资源中找。

上吊猫

图片和css样式看上传资源

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>返回顶部（小猫特效）</title>
    <link rel="stylesheet" href="./css/CatStyle.css" />
  </head>
  <body style="height: 3000px">
    <!-- 上吊猫 -->
    <div
      class="back-to-top cd-top faa-float animated cd-is-visible"
      style="top: -900px"
    ></div>
    <script>
      window.addEventListener("scroll", function () {
        var scroHei = window.scrollY;
        if (scroHei > 300) {
          document.querySelector(".back-to-top").style.top = "-200px";
        } else {
          document.querySelector(".back-to-top").style.top = "-999px";
        }
      });
      document
        .querySelector(".back-to-top")
        .addEventListener("click", function () {
          window.scrollTo({
            top: 0,
            behavior: "smooth",
          });
        });
    </script>
  </body>
</html>

只做学习交流使用

快了，不要急

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
canvas-nest背景和上吊猫分享

1.canvas-是一个基于canvas绘制的网页背景效果的插件，使用简单，但效果贼酷如果你也想你的网页拥有这个背景效果2.上吊猫是一个基于js和css3的样式，有回到顶端的效果下面是分别展示其效果。
复制链接

扫一扫