(星星)跟随鼠标移动的效果.html(网上收集3)

最新推荐文章于 2024-06-14 14:36:26 发布
最新推荐文章于 2024-06-14 14:36:26 发布
阅读量96 收藏
点赞数
分类专栏： vue==前端 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59383491/article/details/134667547
版权 

<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
<span class="js-cursor-container"></span>
<script>
    (function fairyDustCursor() {

        var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
        var width = window.innerWidth;
        var height = window.innerHeight;
        var cursor = { x: width / 2, y: width / 2 };
        var particles = [];

        function init() {
            bindEvents();
            loop();
        }

        // Bind events that are needed
        function bindEvents() {
            document.addEventListener('mousemove', onMouseMove);
            window.addEventListener('resize', onWindowResize);
        }

        function onWindowResize(e) {
            width = window.innerWidth;
            height = window.innerHeight;
        }

        function onMouseMove(e) {
            cursor.x = e.clientX;
            cursor.y = e.clientY;

            addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
        }

        function addParticle(x, y, color) {
            var particle = new Particle();
            particle.init(x, y, color);
            particles.push(particle);
        }

        function updateParticles() {

            // Updated
            for (var i = 0; i < particles.length; i++) {
                particles[i].update();
            }

            // Remove dead particles
            for (var i = particles.length - 1; i >= 0; i--) {
                if (particles[i].lifeSpan < 0) {
                    particles[i].die();
                    particles.splice(i, 1);
                }
            }

        }

        function loop() {
            requestAnimationFrame(loop);
            updateParticles();
        }

        /**
         * Particles
         */

        function Particle() {

            this.character = "*";
            this.lifeSpan = 120; //ms
            this.initialStyles = {
                "position": "fixed",
                "display": "inline-block",
                "top": "0px",
                "left": "0px",
                "pointerEvents": "none",
                "touch-action": "none",
                "z-index": "10000000",
                "fontSize": "25px",
                "will-change": "transform"
            };

            // Init, and set properties
            this.init = function (x, y, color) {

                this.velocity = {
                    x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                    y: 1
                };

                this.position = { x: x + 10, y: y + 10 };
                this.initialStyles.color = color;

                this.element = document.createElement('span');
                this.element.innerHTML = this.character;
                applyProperties(this.element, this.initialStyles);
                this.update();

                document.querySelector('.js-cursor-container').appendChild(this.element);
            };

            this.update = function () {
                this.position.x += this.velocity.x;
                this.position.y += this.velocity.y;
                this.lifeSpan--;

                this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
            }

            this.die = function () {
                this.element.parentNode.removeChild(this.element);
            }

        }

        /**
         * Utils
         */

        // Applies css `properties` to an element.
        function applyProperties(target, properties) {
            for (var key in properties) {
                target.style[key] = properties[key];
            }
        }

        if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
    })();
</script>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>粒子随心动画</title>
    <script src="http://cdn.sucai8.cn/cdn/jquery/jquery-1.10.2.js"></script>
    <style>
        body {
            overflow: hidden;
            margin: 0;
        }

        .twitter:hover a {
            transform: rotate(-45deg) scale(1.05);
        }
        .twitter:hover i {
            color: #21c2ff;
        }
        .twitter a {
            bottom: -40px;
            right: -75px;
            transform: rotate(-45deg);
        }
        .twitter i {
            bottom: 7px;
            right: 7px;
            color: #00aced;
        }

        .social-icon a {
            position: absolute;
            background: white;
            color: white;
            box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
            display: inline-block;
            width: 150px;
            height: 80px;
            transform-origin: 50% 50%;
            transition: 0.15s ease-out;
        }
        .social-icon i {
            position: absolute;
            pointer-events: none;
            z-index: 1000;
            transition: 0.15s ease-out;
        }

        .youtube:hover a {
            transform: rotate(45deg) scale(1.05);
        }
        .youtube:hover i {
            color: #ec4c44;
        }
        .youtube a {
            bottom: -40px;
            left: -75px;
            transform: rotate(45deg);
        }
        .youtube i {
            bottom: 7px;
            left: 7px;
            color: #e62117;
        }
    </style>
</head>
<body>
<canvas></canvas>

<script>
    "use strict";

    // Initial Setup
    var canvas = document.querySelector("canvas");
    var c = canvas.getContext("2d");

    canvas.width = innerWidth;
    canvas.height = innerHeight;

    // Variables
    var mouse = {
        x: innerWidth / 2,
        y: innerHeight / 2 - 80,
    };

    var colors = ["#00bdff", "#4d39ce", "#088eff"];

    // Event Listeners
    addEventListener("mousemove", function (event) {
        mouse.x = event.clientX;
        mouse.y = event.clientY;
    });

    addEventListener("resize", function () {
        canvas.width = innerWidth;
        canvas.height = innerHeight;

        init();
    });

    // Utility Functions
    function randomIntFromRange(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function randomColor(colors) {
        return colors[Math.floor(Math.random() * colors.length)];
    }

    // Objects
    function Particle(x, y, radius, color) {
        var _this = this;

        var distance = randomIntFromRange(50, 120);
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.radians = Math.random() * Math.PI * 2;
        this.velocity = 0.05;
        this.distanceFromCenter = {
            x: distance,
            y: distance,
        };
        this.prevDistanceFromCenter = {
            x: distance,
            y: distance,
        };
        this.lastMouse = { x: x, y: y };

        this.update = function () {
            var lastPoint = { x: _this.x, y: _this.y };
            // Move points over time
            _this.radians += _this.velocity;

            // Drag effect
            _this.lastMouse.x += (mouse.x - _this.lastMouse.x) * 0.05;
            _this.lastMouse.y += (mouse.y - _this.lastMouse.y) * 0.05;

            // Circular Motion
            _this.distanceFromCenter.x =
                _this.prevDistanceFromCenter.x + Math.sin(_this.radians) * 100;
            _this.distanceFromCenter.y =
                _this.prevDistanceFromCenter.x + Math.sin(_this.radians) * 100;

            _this.x =
                _this.lastMouse.x +
                Math.cos(_this.radians) * _this.distanceFromCenter.x;
            _this.y =
                _this.lastMouse.y +
                Math.sin(_this.radians) * _this.distanceFromCenter.y;

            _this.draw(lastPoint);
        };

        this.draw = function (lastPoint) {
            c.beginPath();
            c.strokeStyle = _this.color;
            c.lineWidth = _this.radius;
            c.moveTo(lastPoint.x, lastPoint.y);
            c.lineTo(_this.x, _this.y);
            c.stroke();
            c.closePath();
        };
    }

    // Implementation
    var particles = undefined;
    function init() {
        particles = [];

        for (var i = 0; i < 50; i++) {
            var radius = Math.random() * 2 + 1;
            particles.push(
                new Particle(
                    canvas.width / 2,
                    canvas.height / 2,
                    radius,
                    randomColor(colors)
                )
            );
        }
    }

    // Animation Loop
    function animate() {
        requestAnimationFrame(animate);
        c.fillStyle = "rgba(255, 255, 255, 0.05)";
        c.fillRect(0, 0, canvas.width, canvas.height);

        particles.forEach(function (particle) {
            particle.update();
        });
    }

    init();
    animate();
</script>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>star</title>
    <script type="text/javascript">
        window.onload = function () {
            C = Math.cos; // cache Math objects
            S = Math.sin;
            U = 0;
            w = window;
            j = document;
            d = j.getElementById("c");
            c = d.getContext("2d");
            W = d.width = w.innerWidth;
            H = d.height = w.innerHeight;
            c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
            c.globalCompositeOperation = "lighter";  // switch to additive color application
            c.lineWidth = 0.2;
            c.lineCap = "round";
            var bool = 0,
                t = 0; // theta
            d.onmousemove = function (e) {
                if(window.T) {
                    if(D==9) { D=Math.random()*15; f(1); }
                    clearTimeout(T);
                }
                X = e.pageX; // grab mouse pixel coords
                Y = e.pageY;
                a=0; // previous coord.x
                b=0; // previous coord.y
                A = X, // original coord.x
                    B = Y; // original coord.y
                R=(e.pageX/W * 999>>0)/999;
                r=(e.pageY/H * 999>>0)/999;
                U=e.pageX/H * 360 >>0;
                D=9;
                g = 360 * Math.PI / 180;
                T = setInterval(f = function (e) { // start looping spectrum
                    c.save();
                    c.globalCompositeOperation = "source-over"; // switch to additive color application
                    if(e!=1) {
                        c.fillStyle = "rgba(0,0,0,0.02)";
                        c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
                    }
                    c.restore();
                    i = 25; while(i --) {
                        c.beginPath();
                        if(D > 450 || bool) { // decrease diameter
                            if(!bool) { // has hit maximum
                                bool = 1;
                            }
                            if(D < 0.1) { // has hit minimum
                                bool = 0;
                            }
                            t -= g; // decrease theta
                            D -= 0.1; // decrease size
                        }
                        if(!bool) {
                            t += g; // increase theta
                            D += 0.1; // increase size
                        }
                        q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
                        x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords
                        y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
                        if (a) { // draw once two points are set
                            c.moveTo(a, b);
                            c.lineTo(x, y)
                        }
                        c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
                        c.stroke();
                        a = x; // set previous coord.x
                        b = y; // set previous coord.y
                    }
                    U -= 0.5; // increment hue
                    A = X; // set original coord.x
                    B = Y; // set original coord.y
                }, 16);
            }
            j.onkeydown = function(e) { a=b=0; R += 0.05 }
            d.onmousemove({pageX:300, pageY:290})
        }


    </script>
</head>

<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
<canvas id="c"></canvas>
</body>
</html>

一百减一是零
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html5动态效果随鼠标动,html5跟随鼠标移动银河星系背景动画特效
weixin_39518002的博客
06-03 1551
特效描述：html5 跟随鼠标移动 银河星系 背景动画特效。html5银河星系背景动画，鼠标的移动、点击会发生相应的变化！代码结构1. HTML代码流星雨body {margin:0;padding:0;background-color:#000000;font-size:0;overflow:hidden}div {margin:0;padding:0;position:absolute;fon...
html5 svg彩色星星跟随鼠标光标移动动画js特效
ICode联盟
03-08 266
html5 svg彩色星星跟随鼠标光标移动动画特效，一串各种颜色的五角星跟随鼠标移动，鼠标静止的时候五角星重叠在一起。
原生JS：跟随鼠标移动洒落星星的特效
刻痕
06-26 1172
原生JS：跟随鼠标移动洒落星星的特效。参考网络文档，发现计时器一直跑，容易内存溢出，而且长时间网页很卡。 优化后： - 弃用 setInterval，采用 setTimeout，防止内存溢出 - 鼠标滑动开启4秒倒计时。自动清理之前的计时器 - 便捷引用，动态创建canvas标签，不需要额外的标签、css等 --- 参考文档： [使用JS实现一个跟随鼠标移动洒落的星星特效：https://www.jb51.net/article/279141.
html跟着鼠标滚动,跟随鼠标滚动的星空背景.html
weixin_29212429的博客
06-04 384
canvas星空body {width: 100%;height: 100vh;background-color: #000;background-image: radial-gradient(circle at top right, rgba(121, 68, 154, 0.13), transparent),radial-gradient(circle at 20% 80%, r...
跟随鼠标移动的星星✩直接在页面引用✧✧✧
你好呀，很高兴你在看这里~
04-24 4433
效果✩： 直接在你的页面引用方法✩： 1.新建一个名为 canvasStar.js的文件： 2.右键打开该 js 文件，把下面代码复制进去： window.addEventListener('load',()=>{ var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); window.onresize=resizeCanvas; function
图片跟随鼠标移动
FGHJRT的博客
02-23 178
【代码】图片跟随鼠标移动。
html5 鼠标动画效果,7 个让人惊叹的 HTML5 鼠标动画
weixin_36122351的博客
06-03 1921
今天我们一起来分享一些有趣的HTML5鼠标动画，当我们移动鼠标时，页面上将会出现一些神奇的动画特效。当然这些动画可能在实际应用中并不太会使用到，但是对大家研究HTML5和CSS3的帮助应该会非常大。本文分享的7个HTML5鼠标动画都提供源代码下载，都是一些不错的资源。1、HTML5鲸鱼动画今天我找到了基于HTML5的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML...
html+css+js实现小红点跟随鼠标移动
weixin_64729620的博客
11-02 835
* 该元素不能对鼠标事件做出反应 *//* 小球跟随鼠标的速度 越小越快 */// 鼠标指针移动到元素上时触发。// 鼠标指针移出元素时触发。// 监听事件：鼠标被移动。
Flash 星星坠落 鼠标移动效果.rar
07-10
Flash 星星坠落 鼠标移动效果，Flash星空，Flash鼠标跟随，繁星坠落效果，单击鼠标生成小星星，一闪闪并跟随鼠标移动变化的效果，用到Flash As脚本编程技术，相当酷。
html5 svg彩色星星跟随鼠标光标移动动画特效
06-11
html5 svg彩色星星跟随鼠标光标移动动画特效，一串各种颜色的五角星跟随鼠标移动，鼠标静止的时候五角星重叠在一起。
html5 svg彩色星星跟随鼠标光标移动动画特效.zip
09-26
有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！
canvas跟随鼠标移动的星星源码.html
08-10
对应我canvas跟随鼠标移动的星星这篇博客
jQuery鼠标移动星星跟随显示特效.zip
07-05
jQuery鼠标移动星星跟随显示特效是一款可以自定义跟随鼠标移动的星星的数量，颜色，范围等，也可以使用自定义的图片来代替星星。
HTML跨年烟花
热门推荐
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 527
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
Html_Css问答集(3)
最新发布
白话魔法师
06-14 480
html与css学习中的一些疑问，问答中轻松获取知识。
HTML (总结黑马的)
SKL4399的博客
06-01 1658
img src="./cat.jpg" alt="替换文本" title="提示文本"> 替换文本是图片没有显示的时候显示对应的文字；定义列表： 标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情 类似于苹果官网最下面的那个效果。 女。
js轮播图有，移入移出事件，左右滑动事件功能
tianxianghuiwei的博客
06-14 93
具体的轮播可以根据需求进行调整；
在vue中好用的跟随鼠标移动的组件有哪些
05-23
以下是在Vue中可用的一些跟随鼠标移动的组件： 1. vue-mouse-parallax：一个用于Vue的非常简单的鼠标视差库，可用于创建令人印象深刻的背景效果。 2. vue-parallax：一个Vue组件，用于创建简单的鼠标视差效果。 3. vue-mousemove-ripple：一个Vue组件，可用于在用户单击元素时创建波纹效果。 4. vue-particles：一个Vue组件，可用于创建很酷的粒子效果，可模拟流星、星星等效果，支持鼠标跟随效果。 5. vue-mouse-trail：一个Vue组件，可用于创建带有鼠标移动轨迹的效果，非常适合用于创建基于鼠标的动画。 这些组件都是开源的，可以通过npm安装并在Vue项目中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一百减一是零

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值