<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <link rel="shortcut icon" href="https://images.cnblogs.com/cnblogs_com/Rui6/1845398/o_200911002702%E8%93%9D%E8%89%B2%E7%81%AB%E7%84%B0R%20-%20%E5%89%AF%E6%9C%AC.jpg" type="image/x-icon">

    <title>L-Rui</title>

    <style type="text/css">

        #box1 {

            width: 100%;

            height: 100;

            /* background:lightcoral; */

            position: absolute;

        }

        .title {

   height: 15%;

   font-size: 18px;

   position: relative;

}

.title span {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

        body {

  overflow: hidden;

  margin: 0;

}

    </style>

    <!-- <img src="H:\壁纸\大自然\2020.jpg" width="100%" height="100%" /> -->

    <script type="text/javascript">

        window.onload = function () {

            var box1 = document.getElementById("box1");

            box1.onmousedown = function (event) {

                // console.log(1);

                /*再次点击时使得图标任然在那个位置，鼠标可以点击到图标上*/

                var ol = event.clientX - box1.offsetLeft;

                var ot = event.clientY - box1.offsetTop;

                /*鼠标点击*/

                document.onmousemove = function (event) {

                    var left = event.clientX - ol;

                    var top = event.clientY - ot;

                    box1.style.left = left+"px";/*赋值*/

                    box1.style.top = top+"px";

                }

                /*鼠标松开*/

                document.onmouseup = function (event) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                }

            }

        }

    </script>

</head>

<body>

<div id="box1" class="title">

    <span>

        <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

        <!-- <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script> -->

    </span>

</div>

<script type="text/javascript">

    /*7Core-CN - 网页鼠标点击特效（爱心）*/ ! 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>

<!-- 心形动画跟随鼠标光标运动特效 -->

<canvas>

    <script>

    'use strict';

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

// 彩虹七种颜色的RGB值十六进制

// 红色 #FF0000

// 橙色 #FF7F00

// 黄色 #FFFF00

// 绿色 #00FF00

// 青色 #00FFFF

// 蓝色 #0000FF

// 紫色 #8B00FF

    //var colors = ['#FF0000'];

     var colors = ['#FF0000', '#FF7F00', '#FFFF00','#00FF00','00FFFF','#0000FF','#8B00FF'];

    // 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

    };

    // 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>

</canvas>

<!-- 动态粒子 -->

<!-- <div>

    <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>

<script>

  function o(w,v,i){

      return w.getAttribute(v)||i

  }

  function j(i){

      return document.getElementsByTagName(i)

  }

  function l(){

      var i=j("script"),w=i.length,v=i[w-1];

      return {l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}

  }

  function k(){

      r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,

      n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

  }

  function b(){

      e.clearRect(0,0,r,n);

      var w=[f].concat(t);

      var x,v,A,B,z,y;

      t.forEach(function(i){

          i.x+=i.xa,

          i.y+=i.ya,

          i.xa*=i.x>r||i.x<0?-1:1,

          i.ya*=i.y>n||i.y<0?-1:1,

          e.fillRect(i.x-0.5,i.y-0.5,1,1);

          for(v=0;v<w.length;v++){

              x=w[v];

              if(i!==x&&null!==x.x&&null!==x.y){

                  B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;

                  y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())

              }

          }

          w.splice(w.indexOf(i),1)

      }),m(b)

  }

  var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,

  m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){

      window.setTimeout(i,1000/45)

  },

  a=Math.random,f={x:null,y:null,max:20000};

  u.className="particle_canvas";

  var browserName = navigator.userAgent.toLowerCase();

  if (/msie/i.test(browserName) && !/opera/.test(browserName)) {

      u.className += ' ie10_gte';

  };

  u.id=c;

  u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;

  j("body")[0].appendChild(u);

  k(),window.onresize=k;

  window.onmousemove=function(i){

      i=i||window.event,

      f.x=i.clientX,

      f.y=i.clientY

  },

  window.onmouseout=function(){

      f.x=null,

      f.y=null

  };

  for(var t=[],p=0;s.n>p;p++){

      var h=a()*r,

      g=a()*n,

      q=2*a()-1,

      d=2*a()-1;

      t.push({x:h,y:g,xa:q,ya:d,max:6000})

  }

  setTimeout(function(){b()},100)

</script>

<style>

.github-corner:hover .octo-arm {

animation: octocat-wave 560ms ease-in-out

}

@keyframes octocat-wave {

0%, 100% {

  transform: rotate(0)

}

20%, 60% {

  transform: rotate(-25deg)

}

40%, 80% {

  transform: rotate(10deg)

}

}

@media (max-width:500px) {

.github-corner:hover .octo-arm {

  animation: none

}

.github-corner .octo-arm {

  animation: octocat-wave 560ms ease-in-out

}

}

</style>

<div class="snorlax">

<div class="snorlax__head">

<div class="snorlax__head-outline"></div>

<div class="snorlax__ear snorlax__ear--left"></div>

<div class="snorlax__ear snorlax__ear--right"></div>

<div class="snorlax__brow snorlax__brow--left"></div>

<div class="snorlax__brow snorlax__brow--right"></div>

<div class="snorlax__eye snorlax__eye--left"></div>

<div class="snorlax__eye snorlax__eye--right"></div>

<div class="snorlax__mouth">

  <div class="snorlax__tooth snorlax__tooth--left"></div>

  <div class="snorlax__tooth snorlax__tooth--right"></div>

</div>

</div>

<div class="snorlax__arm-left">

<div class="snorlax__arm-wrapper">

  <div class="snorlax__claws--left"></div>

  <div class="snorlax__arm-left-arm"></div>

</div>

</div>

<div class="snorlax__arm-right">

<div class="snorlax__claws--right"></div>

<div class="snorlax__arm-right-arm"></div>

<div class="snorlax__claw"></div>

</div>

<div class="snorlax__body">

<div class="snorlax__body-shade"></div>

<div class="snorlax__belly">

  <div class="snorlax__belly-segment snorlax__belly-segment--one"></div>

  <div class="snorlax__belly-segment snorlax__belly-segment--two"></div>

</div>

</div>

<div class="snorlax__left-foot">

<div class="snorlax__left-foot-foot"></div>

<div class="snorlax__foot-claw snorlax__foot-claw--one">

  <div></div>

</div>

<div class="snorlax__foot-claw snorlax__foot-claw--two">

  <div></div>

</div>

<div class="snorlax__foot-claw snorlax__foot-claw--three">

  <div></div>

</div>

</div>

<div class="snorlax__right-foot">

<div class="snorlax__right-foot-foot"></div>

<div class="snorlax__foot-claw snorlax__foot-claw--four">

  <div></div>

</div>

<div class="snorlax__foot-claw snorlax__foot-claw--five">

  <div></div>

</div>

<div class="snorlax__foot-claw snorlax__foot-claw--six">

  <div></div>

</div>

</div>

</div>

</div> -->

</body>

</html>

L-Rui的更多相关文章

  1. 关于C++对汉字拼音的处理——终结篇

    以前写过了3个博文,都是关于汉字转拼音的,后来发现都不是很“完美”的解决方案,第一个和第二个利用的unicode编码的范围进行确定汉字的拼音,但是难免有遗漏,这个在后面的实践中发现的,后来第三个方法是 ...

  2. JavaWeb 后端 <二> 之 Servlet 学习笔记

    一.Servlet概述 1.什么是Servlet Servlet是一个运行在服务器端的Java小程序,通过HTTP协议用于接收来自客户端请求,并发出响应. 2.Servlet中的方法 public v ...

  3. HTML5 3D 粒子波浪动画特效DEMO演示

    需要thress.js插件:     http://github.com/mrdoob/three.js // three.js - http://github.com/mrdoob/three.js ...

  4. 排序算法----基数排序（RadixSort（L））单链表智能版本

    转载http://blog.csdn.net/Shayabean_/article/details/44885917博客 先说说基数排序的思想: 基数排序是非比较型的排序算法,其原理是将整数按位数切割 ...

  5. VC 中与字符串相关的宏 _T、TEXT,_TEXT、L 的作用

    CSDN原博文:http://blog.csdn.net/houkai363/article/details/8134787 遇到了:不能将参数 1 从“const char [5]”转换为“LPCT ...

  6. 排序算法----基数排序（RadixSort（L，max））单链表版本

    转载http://blog.csdn.net/Shayabean_/article/details/44885917博客 先说说基数排序的思想: 基数排序是非比较型的排序算法,其原理是将整数按位数切割 ...

  7. BZOJ 1212: [HNOI2004]L语言 [AC自动机 DP]

    1212: [HNOI2004]L语言 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1367  Solved: 598[Submit][Status ...

  8. latex均方极限符号l.i.m在lyx下的输入方法

    $\mathop{l.i.m}\limits_{x\to +\infty}$ 命令说明: 1.指定数学环境$$ 2.\mathop{l.i.m}指数学符号自定义为l.i.m 3.\limits_{x\ ...

  9. 求单链表L各结点的阶乘之和（c语言）

    链表需要用到指针 阶乘需要用到递归 链表中的注意事项: 1.链表L是否等于NULL ----------是循环结束的条件 2.链表L->Data ---------取链表L中各个结点的值 3.L ...

  10. 模仿迅L看看<音频播放器> 实现点击进度条，跳转播放

    <Style x:Key="btnFallback" TargetType="{x:Type Button}"> <Setter Proper ...

随机推荐

  1. 论文解读《Deep Plug-and-Play Super-Resolution for Arbitrary Blur Kernel》

    Deep Plug-and-Play Super-Resolution for Arbitrary Blur Kernels: 一旦退化模型被定义,下一步就是使用公式表示能量函数(energy fun ...

  2. PCB layout注意事项

    1.信号线一般12mil以上,选15或20左右及以上 via内外径选2倍关系的,如内径10mi外径20mil,但不是绝对,内10外15.18也可. 2.mil与mm单位转换,即100mil=2.54m ...

  3. SpringBoot第二集：注解与配置（2020最新最易懂）

    2020最新SpringBoot第二集:基础注解/基础配置(2020最新最易懂) 一.Eclipse安装SpringBoot插件 Eclipse实现SpringBoot开发,为便于项目的快速构建,需要 ...

  4. python接口自动化测试遇到的问题及解决方案

    工作中xml中的某一个字段是全网唯一,这就需要进行参数化处理.此次对这一个字段进行参数化处理引用了random模块和index()函数.代码如下: #!/usr/bin/python # -*- co ...

  5. Luogu P4172 [WC2006]水管局长

    题意 给定一个 \(n\) 个点 \(m\) 条边的图和 \(q\) 次操作,每次操作分为以下两种: 1 u v:查询 \(u\) 到 \(v\) 的一条路径使得边权最大的边的权值最小. 2 u v: ...

  6. pandas模块常用函数解析之Series（详解）

    pandas模块常用函数解析之Series 关注公众号"轻松学编程"了解更多. 以下命令都是在浏览器中输入. cmd命令窗口输入:jupyter notebook 打开浏览器输入网 ...

  7. GANSS 87C键盘在Linux无法正常使用的解决办法

    前几天在狗东入手可以一把GANSS的87C键盘,满心欢喜拆开来用却发现在开发电脑(Deepin和ubuntu)上F1-F12都不能正常使用,这对一个搞web开发的人来说,无疑是要了我的老命,无奈找各种 ...

  8. C#5语法新特性

    C# 5.NET Framework 4.5 Visual Studio 2012 C#5.0新引进的语法基于.Net Framework 4.5.主要引进的语法:异步与等待,调用方信息 其中最重要的 ...

  9. AC86U kx上网

    AC86U收到很久了,为了能够kx上网免不了一番折腾. 准备 U盘一个, 读写速度要大于30M/s, 用于制作虚拟内存 步骤大致如下: 1.下载koolshare固件 我这里下载的是官改固件:http ...

  10. 9、Django之模型层第四篇：进阶操作

    一 QuerySet对象 1.1可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. Entry.objects.all()[:5] # ...