L-Rui 

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

 


__EOF__

本文作者：Ray
本文链接：https://www.cnblogs.com/Rui6/p/13650170.html
关于博主：分享、记录日常遇到的问题合集！
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   大白菜！  阅读(129)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示