为网页背景添加一个跟随鼠标变幻的动态线条

一.效果图

二.使用方法

引用js文件即可, 例如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>canvas-nest</title>
    </head>
    <body>
        <script type="text/javascript" src="https://blog-static.cnblogs.com/files/yadongliang/canvas-nest.min.js"></script>
        <canvas height="926" width="1920" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;" id="c_n1"></canvas>
    </body>
</html>

三.已上传至GitHub(戳我下载)

原文地址:https://www.cnblogs.com/yadongliang/p/10662394.html

时间: 2024-12-07 13:59:27

为网页背景添加一个跟随鼠标变幻的动态线条的相关文章

【jQuery】一个跟随鼠标运动的图层

一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图, 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了-- 二.制作过程 本次实验的核心是jquery里面的mousemove事件, 鼠标移动则触发. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

在网页中添加一个可以收藏的功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

如何在网页上添加一个微信加好友接口??一键跳转微信添加微信好友的原理!!

近期有发现越来越多的广告行业的商家都在寻找如何提升公众号/个人微信吸粉的通道,因为成本暴涨,各个广告渠道又不是很稳定,所以很多人都在咨询如何降低成本.如果采用微信的广告渠道,首先限量其次非常贵,所以只能通过外部的一些推广渠道来吸粉.那么如果按照传统的方式,我们只能在外部广告页放一个二维码,让用户去扫码关注.添加之类的,这个场景适合PC端,试想现在用户更多的时间是停留在手机端的,所以没办法拿着自己的手机去扫自己手机屏幕上面的二维码,那么就孵化出一种需求,如何更加快速便捷的完成添加关注这个操作? 微

网页动态背景——随鼠标变换的动态线条

先上一张效果图. 代码如下: <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> 1 /** 2 * Copyright (c) 2016 hustcc 3 * License: MIT 4 * Version: v1.0.1 5 * GitHub: https://gith

网页中添加一个区域,带有滚动条

#userinfo { overflow-y: scroll; position: absolute; top: 15px; bottom: 15px; width: 90%; min-height: 300px; }

jQuery背景跟随鼠标移动的网页导航

首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 滚动图片 广告特效 选项卡特效 鼠标特效 表单按钮 表格图层 窗口特效 文字特效 色彩特效 图像特效 日期特效 导航菜单 在线客服 当前位置:模板网首页 > 特效插件 > 导航菜单 >  jQuery背景跟随鼠标移正文 jQuery背景跟

分享一个很有意思的js,动态时钟显示,能跟随鼠标移动

原文:分享一个很有意思的js,动态时钟显示,能跟随鼠标移动 源代码下载地址:http://www.zuidaima.com/share/1550463688182784.htm

javascript 跟随鼠标移动的提示框的一个小demo

下面提供一种跟随鼠标移动的提示框的思路,方便在以后工作中应用,主要是应用到鼠标移动产生的数值来进行移动提示框的定位... CSS代码   .box{height:100px;width:100px;background:orange;position:relative;margin:40px;} .move{height:20px;width:20px;background:red;position:absolute;left:0px;top:0px;display:none;} HTML代码

HTML&amp;CSS基础学习笔记1.28-给网页添加一个css样式

CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 我们可以这么说,CSS是网页的衣服,它可以用来装饰网页. 那么接下来我们就来试试css吧~ 给网页添加一个CSS样式 尝试给<p>标签直接加了一个[style]属性,并且给标签添加了一个字体颜色.这种在标签上直接添加样式的形式,我们称这种关联方