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