网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

这篇具有很好参考价值的文章主要介绍了网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

作为一个乐于分享知识的程序员来说,博客必不可少。

在制作博客的过程中,改前端改得让人不言而喻🤡

其次,为了大伙们不步我后尘,给大家陆续分享出来,如果觉得有帮助可以点赞收藏支持一下,如果能关注一下就再好不过了ヾ(≧▽≦*)o,之后还会分享许多内容,废话不多说,上干货~

这是小编的博客,大伙们可以去逛逛哦~点击

看板娘

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

代码(直接引入js文件即可)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

鼠标点击效果

1、弹出字体

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <script>
        (function () {
            var a_idx = 0;
            window.onclick = function (event) {
                var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国",
                    "敬业", "诚信", "友善");
 
                var heart = document.createElement("b"); //创建b元素
                heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
 
                document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
                a_idx = (a_idx + 1) % a.length;
                heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
 
                var f = 16, // 字体大小
                    x = event.clientX - f / 2, // 横坐标
                    y = event.clientY - f, // 纵坐标
                    c = randomColor(), // 随机颜色
                    a = 1, // 透明度
                    s = 1.2; // 放大缩小
 
                var timer = setInterval(function () { //添加定时器
                    if (a <= 0) {
                        document.body.removeChild(heart);
                        clearInterval(timer);
                    } else {
                        heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                            c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                            s + ");";
 
                        y--;
                        a -= 0.016;
                        s += 0.002;
                    }
                }, 15)
 
            }
            // 随机颜色
            function randomColor() {
 
                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
 
            }
        }());
    </script>
</body>
 
</html>

2、变色❤

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <!-- 网页鼠标点击特效(爱心) -->
    <script type="text/javascript">
         ! function (e, t, a) {
            function r() {
                for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                        e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                    "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }
 
            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(), o(e)
                }
            }
 
            function o(e) {
                var a = t.createElement("div");
                a.className = "heart", s.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: c()
                }), t.body.appendChild(a)
            }
 
            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }
 
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                    .random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
                .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                    setTimeout(e, 1e3 / 60)
                }, i(
                    ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
                ), n(), r()
        }(window, document);
    </script>
</body>
 
</html>

3、弹出烟花波纹

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

<html>
<head>
 
</head>
<body>
<script>
function clickEffect() {
  let balls = [];
  let longPressed = false;
  let longPress;
  let multiplier = 0;
  let width, height;
  let origin;
  let normal;
  let ctx;
  const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
  const pointer = document.createElement("span");
  pointer.classList.add("pointer");
  document.body.appendChild(pointer);
 
  if (canvas.getContext && window.addEventListener) {
    ctx = canvas.getContext("2d");
    updateSize();
    window.addEventListener('resize', updateSize, false);
    loop();
    window.addEventListener("mousedown", function(e) {
      pushBalls(randBetween(10, 20), e.clientX, e.clientY);
      document.body.classList.add("is-pressed");
      longPress = setTimeout(function(){
        document.body.classList.add("is-longpress");
        longPressed = true;
      }, 500);
    }, false);
    window.addEventListener("mouseup", function(e) {
      clearInterval(longPress);
      if (longPressed == true) {
        document.body.classList.remove("is-longpress");
        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
        longPressed = false;
      }
      document.body.classList.remove("is-pressed");
    }, false);
    window.addEventListener("mousemove", function(e) {
      let x = e.clientX;
      let y = e.clientY;
      pointer.style.top = y + "px";
      pointer.style.left = x + "px";
    }, false);
  } else {
    console.log("canvas or addEventListener is unsupported!");
  }
 
 
  function updateSize() {
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    ctx.scale(2, 2);
    width = (canvas.width = window.innerWidth);
    height = (canvas.height = window.innerHeight);
    origin = {
      x: width / 2,
      y: height / 2
    };
    normal = {
      x: width / 2,
      y: height / 2
    };
  }
  class Ball {
    constructor(x = origin.x, y = origin.y) {
      this.x = x;
      this.y = y;
      this.angle = Math.PI * 2 * Math.random();
      if (longPressed == true) {
        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
      } else {
        this.multiplier = randBetween(6, 12);
      }
      this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
      this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
      this.r = randBetween(8, 12) + 3 * Math.random();
      this.color = colours[Math.floor(Math.random() * colours.length)];
    }
    update() {
      this.x += this.vx - normal.x;
      this.y += this.vy - normal.y;
      normal.x = -2 / window.innerWidth * Math.sin(this.angle);
      normal.y = -2 / window.innerHeight * Math.cos(this.angle);
      this.r -= 0.3;
      this.vx *= 0.9;
      this.vy *= 0.9;
    }
  }
 
  function pushBalls(count = 1, x = origin.x, y = origin.y) {
    for (let i = 0; i < count; i++) {
      balls.push(new Ball(x, y));
    }
  }
 
  function randBetween(min, max) {
    return Math.floor(Math.random() * max) + min;
  }
 
  function loop() {
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.r < 0) continue;
      ctx.fillStyle = b.color;
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
      ctx.fill();
      b.update();
    }
    if (longPressed == true) {
      multiplier += 0.2;
    } else if (!longPressed && multiplier >= 0) {
      multiplier -= 0.4;
    }
    removeBall();
    requestAnimationFrame(loop);
  }
 
  function removeBall() {
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
        balls.splice(i, 1);
      }
    }
  }
}
clickEffect();//调用特效函数
</script>
</body>
</html>

炫酷登录

1、动态云层登录

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

2、彩色气泡登录

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

樱花特效

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

生日祝福

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

定时给女朋友彩虹屁

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)

文件获取

百度网盘
链接:https://pan.baidu.com/s/1EJ8v2e707x5jeicdDVnbmQ
提取码:0llp

满满的干货哦
如果觉得有帮助的话,就光顾一下小编博客吧 ~ 点击
如果能留下你的见解,那就最好不过了哈 ~ 前往文章来源地址https://www.toymoban.com/news/detail-485370.html

到了这里,关于网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+JS樱花飘落特效+鼠标点击特效

    目录:     效果: index.html 代码: yinghua.js 代码(图片为base64编码,可根据具体情况修改): shubiaodianji.js 代码:

    2024年02月11日
    浏览(59)
  • 五款拿来就能用的炫酷表白代码

    「作者主页」: 士别三日wyx 「作者简介」: CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」: 小白零基础《Python入门到精通》 Python弹窗表白代码,根据电脑性能设置弹窗个数,效果图如下: 完整代码如下,不用导入模块,复制就能用

    2024年02月12日
    浏览(42)
  • 十几款拿来就能用的炫酷表白代码

    「作者主页」: 士别三日wyx 「作者简介」: CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」: 小白零基础《Python入门到精通》 复制到文本文件,后缀名改成 vbs 就能运行,效果如下。 完整代码如下,复制就能用 为了防止有些小伙伴关机

    2024年02月11日
    浏览(52)
  • VUE 常用炫酷动画库(拿来即用系列)

    目录  打字机效果Vue动画库  代码示例 效果 炫酷背景动画库 代码示例  效果 npm install vue-typical  npm install particles-bg-vue  type:ball type: cobweb type:color type: fountain  type:custom  type:random 随机一个以上的动画

    2024年02月08日
    浏览(54)
  • 从零开始学习调用百度地图网页API:三、鼠标点击绘图功能

    注:需要将 你的ak 替换,ak从百度地图官网注册申请,选择浏览器类型api。 绘制线段 显示对象的位置信息 显示任意点坐标 最初的实现方法,在 显示坐标 按钮多次被点击后,会导致再点击 不显示 按钮,无法remove事件。依然会在地图上点击后出现坐标信息。 这是因为addEve

    2024年02月07日
    浏览(90)
  • 解决网页播放【鼠标移开屏幕或点击屏外视频暂停播放】

    解决网页播放【鼠标移开屏幕或点击屏外视频暂停播放】 亲测有效,亲测有效,亲测有效, 当我们有时看视频时遇到以下问题,当我们点击视频播放后,视频开始播放,可当我们将鼠标移动出浏览器,或将鼠标切换到其他页面时,视频自动停止,影响我们工作效率,此时该

    2023年04月09日
    浏览(44)
  • ThreeJS 炫酷特效旋转多面体Web页 Demo 01《ThreeJS 炫酷特效制作》

    本案例为一个 threejs 的特效网页,大小球体进行包裹,外球体为透明材质,但是进行了线框渲染,使其能够通过外球踢查看其内球体。 注:案例参考源于互联网,在此做代码解释,侵删 本案例除 ThreeJS 外不适用任何第三方框架,放心食用 懒的同学可以直接下载代码,打赏作

    2024年02月08日
    浏览(56)
  • python炫酷特效代码简单,python制作的炫酷动画

    本篇文章给大家谈谈python炫酷特效代码简单,以及python好看的图案代码,希望对各位有所帮助,不要忘了收藏本站喔。 可以生成下面这种图 import random import turtle def random_color():     rgbl=[255,0,0]     random.shuffle(rgbl)     return tuple(rgbl) def koch(size,n):     if n==0:         (size)  

    2024年02月07日
    浏览(50)
  • vscode超炫酷的编码特效详解

    1.在扩展中搜索         插件:Power Mode    2.在设置里搜索Code Actions On Save   3.点击在settings.json中编辑  

    2024年02月12日
    浏览(86)
  • 炫酷的花式滑块滑动无缝切换特效

    💂 个人网站:【 海拥】【小霸王游戏机】【大转盘】 🤟 风趣幽默的前端学习课程:👉28个案例趣学前端 💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习群】【学习文档】 💬 免费且实用的计算机相关知识题库:👉进来逛逛 给大家安利一个免费且实用的前

    2024年02月21日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包