简介:
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>
只做学习交流使用