随鼠标移动的线条

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js">
    /**
     * Copyright (c) 2016 hustcc
     * License: MIT
     * Version: v1.0.1
     * GitHub: https://github.com/hustcc/canvas-nest.js
     **/
    !
        function() {
            function n(n, e, t) {
                return n.getAttribute(e) || t
            }
            function e(n) {
                return document.getElementsByTagName(n)
            }
            function t() {
                var t = e("script"),
                    o = t.length,
                    i = t[o - 1];
                return {
                    l: o,
                    z: n(i, "zIndex", -1),
                    o: n(i, "opacity", .5),
                    c: n(i, "color", "0,0,0"),
                    n: n(i, "count", 99)
                }
            }
            function o() {
                a = m.width = window.innerWidth 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以尝试使用CSS3的动画效果来实现该功能,具体步骤如下: 1. 创建一个容器,设置其宽度和高度,并将其作为页面的背景。 2. 使用伪元素 `::before` 和 `::after`,分别创建两条垂直线条,并将它们定位到容器的左右两侧。 3. 给这两条线条添加CSS3的动画效果,使它们在容器内部来回移动。 4. 使用JavaScript来监听鼠标移动事件,获取鼠标的坐标,并将其传递给线条的样式属性,使线条汇聚于鼠标位置。 以下是一个简单的示例代码: HTML代码: ```html <div class="container"></div> ``` CSS代码: ```css .container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; } .container::before, .container::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; bottom: 0; margin: auto; background-color: #fff; animation: animate 2s linear infinite; } .container::before { left: 0; } .container::after { right: 0; } @keyframes animate { 0% { transform: translateY(-50px); } 50% { transform: translateY(50px); } 100% { transform: translateY(-50px); } } ``` JavaScript代码: ```js const container = document.querySelector('.container'); const beforeLine = document.querySelector('.container::before'); const afterLine = document.querySelector('.container::after'); container.addEventListener('mousemove', e => { const x = e.clientX; const y = e.clientY; beforeLine.style.transform = `translateY(${y}px)`; afterLine.style.transform = `translateY(${y}px)`; }); ``` 这样,您就可以实现一个简单的动态线条背景鼠标特效了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值