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>
L-Rui的更多相关文章
- 关于C++对汉字拼音的处理——终结篇
以前写过了3个博文,都是关于汉字转拼音的,后来发现都不是很“完美”的解决方案,第一个和第二个利用的unicode编码的范围进行确定汉字的拼音,但是难免有遗漏,这个在后面的实践中发现的,后来第三个方法是 ...
- JavaWeb 后端 <二> 之 Servlet 学习笔记
一.Servlet概述 1.什么是Servlet Servlet是一个运行在服务器端的Java小程序,通过HTTP协议用于接收来自客户端请求,并发出响应. 2.Servlet中的方法 public v ...
- HTML5 3D 粒子波浪动画特效DEMO演示
需要thress.js插件: http://github.com/mrdoob/three.js // three.js - http://github.com/mrdoob/three.js ...
- 排序算法----基数排序（RadixSort（L））单链表智能版本
转载http://blog.csdn.net/Shayabean_/article/details/44885917博客 先说说基数排序的思想: 基数排序是非比较型的排序算法,其原理是将整数按位数切割 ...
- VC 中与字符串相关的宏 _T、TEXT,_TEXT、L 的作用
CSDN原博文:http://blog.csdn.net/houkai363/article/details/8134787 遇到了:不能将参数 1 从“const char [5]”转换为“LPCT ...
- 排序算法----基数排序（RadixSort（L，max））单链表版本
转载http://blog.csdn.net/Shayabean_/article/details/44885917博客 先说说基数排序的思想: 基数排序是非比较型的排序算法,其原理是将整数按位数切割 ...
- BZOJ 1212: [HNOI2004]L语言 [AC自动机 DP]
1212: [HNOI2004]L语言 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1367 Solved: 598[Submit][Status ...
- 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\ ...
- 求单链表L各结点的阶乘之和（c语言）
链表需要用到指针 阶乘需要用到递归 链表中的注意事项: 1.链表L是否等于NULL ----------是循环结束的条件 2.链表L->Data ---------取链表L中各个结点的值 3.L ...
- 模仿迅L看看<音频播放器> 实现点击进度条，跳转播放
<Style x:Key="btnFallback" TargetType="{x:Type Button}"> <Setter Proper ...
随机推荐
- Redis学习笔记（九）——集群
一.概述 Redis Cluster与Redis3.0.0同时发布,以此结束了Redis无官方集群方案的时代. Redis Cluster是去中心化,去中间件,也就是说,集群中的每个节点都是平等的关 ...
- 网络爬虫第三次作业——多线程、scrapy框架
作业①: 1)单/多线程爬取网站图片实验 要求:指定一个网站,爬取这个网站中的所有的所有图片,例如中国气象网http://www.weather.com.cn.分别使用单线程和多线程的方式爬取. ...
- MIT黑科技：通过手机记录的咳嗽数据检测是否感染新冠病毒
这次的新冠状病毒虽然没有2002年的SARS破坏力那么强悍,但其可怕之处是长时间的无症状潜伏,使得被感染者在不知情的情况下,将病毒散播出去.如果没有强有力的防疫手段,病毒的传播几乎难以控制.而防止病毒 ...
- 分享JDK解压版（ZIP）
目录 由于安装版本的jdk不太方便,所以我分享一下如何去获取解压版的jdk,jdk配置的话看这个文章 一.先下载exe版本的jdk安装程序: 二.使用7-ZIP解压工具 2.1 JDK8的解压目录 2 ...
- Java_流相关
java.io包中重要的5个类3个接口 类名 说明 File 文件类 InputStream 字节流输入 OutputStream 字节流输出 Reader 字符输入流 Writer 字符输出流 Cl ...
- 【有奖众测】给HMS Core文档提建议，赢大奖华为Watch！
为了提升HMS Core开发者的文档体验,提升开发效率,邀请所有开发者体验HMS Core文档,并贡献您的建议. 无论是文档让您困惑的地方,还是您发现的问题,或者您觉得可以做的更好的地方,都可以尽情的 ...
- java中在构造方法中修改线程名，修改失败原因（现已修改成功）
package com.cx.Threads; public class HelloThread extends Thread{ @Override public void run() { for ( ...
- HTML 5 <input> multiple 属性
<form action="demo_form.asp" method="get"> Select images: <input type=& ...
- 8.java设计模式之装饰者模式
基本需求: 咖啡的种类有很多种,调料也有很多种,下单时,可以点单品咖啡也可以点单品咖啡+调料的组合,并计算下单时花费的金额 传统方式: 方式一 创建一个抽象类Drink,让所有的单品咖啡和组合咖啡都继 ...
- mysql中delete from t1 where id = 10加锁状况叙述
在Next_Key Lock算法中,不仅仅锁定住所找到的索引,而且还锁定住这些索引覆盖的范围.因此在这个范围内的插入都是不允许的.这样就避免了在这个范围内插入数据导致的幻读问题. delete fro ...