html gmstore.com 主页

最新推荐文章于 2024-09-26 23:39:18 发布

Inin888yoxi

最新推荐文章于 2024-09-26 23:39:18 发布

阅读量805

点赞数 5

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/Inin888yoxi/article/details/141448092

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html lang="ch">
<head>
<meta charset="utf-8">
<title>gmstore</title>
<link rel="icon" href="teng shops 1.png?x-oss-process=image/resize,w_300/format,webp"/>
</head>
<body background="https://static0.xesimg.com/programme/python_assets/f147a0634591d372f13f852c54eb2c7b.png" style="background-repeat:no-repeat; background-size:110% 110%; background-attachment:fixed">
<div class="demo"id="whx">
<span οnclick="whx()"class="x">
×
</span>
hey~欢迎来到GMstore.com~
</div>
<script>
function whx(){
if (confirm("您真的要删除这条警告弹窗吗？删除后将无法回复！") == true)
{
    document.getElementById("whx").style.display="none";
}
else
{
    return false;
}
}
</script>
<style>
.x{
font-size:50px;
color:grey;
cursor:url('https://livefile.xesimg.com/programme/python_assets/625dc4e9a540dcbf8d9232a2dc03d81d.svg'),auto;
}
.x:hover{
font-size:50px;
color:black;
cursor:url('https://livefile.xesimg.com/programme/python_assets/625dc4e9a540dcbf8d9232a2dc03d81d.svg'),auto;
}
.demo{
top: 0px;
color: white;
height: 20%;
width: 99.5%;
font-size: 25px;
margin-bottom: 0px;
border-radius: 3px;
border: 2px solid rgba(0,8,20);
font-family: '微软雅黑';
background-color:#00ee76;
cursor:url('https://livefile.xesimg.com/programme/python_assets/aa268f99c0d2b2680292c877bb1fdb60.svg'),auto;
}
.demo:hover{
top: 0px;
color: white;
height: 20%;
width: 99.5%;
font-size: 25px;
margin-bottom: 0px;
border-radius: 3px;
border: 2px solid rgba(0,8,20);
font-family: '微软雅黑';
background-color:#00fa9a;
cursor:url('https://livefile.xesimg.com/programme/python_assets/aa268f99c0d2b2680292c877bb1fdb60.svg'),auto;
}
body{
margin: 0%;
cursor:url('https://livefile.xesimg.com/programme/python_assets/aa268f99c0d2b2680292c877bb1fdb60.svg'),auto;
}
.title{
color: orange;
background-color:#00fa9a;
font-size: 53px;
letter-spacing: 0;
font-family: '楷书';
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #00c78c;
}
text2{
font-size: 25px;
font-family: '微软雅黑';
}
catalogue{
color: orange;
font-size: 28px;
font-family: '微软雅黑';

-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
catalogue:hover{
color: white;
background-color: blue;
}
a{
color: lightblue;
text-decoration: none;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor:url('https://livefile.xesimg.com/programme/python_assets/625dc4e9a540dcbf8d9232a2dc03d81d.svg'),auto;
}
a:hover{
color: blue;
text-decoration: none;
cursor:url('https://livefile.xesimg.com/programme/python_assets/625dc4e9a540dcbf8d9232a2dc03d81d.svg'),auto;
}
button{
position: relative;
background-color: lightgreen;
   border:2px solid #98fb98;
border-radius:8px;
font-size: 18px;
color: #87cefa;
padding: 14px 50px;
margin: 4px 2px;
text-align: center;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
font-family: '微软雅黑';
cursor:url('https://livefile.xesimg.com/programme/python_assets/625dc4e9a540dcbf8d9232a2dc03d81d.svg'),auto;
}
button:hover{
background-color: #eeeed1;
}
.bor{
border:2px dashed orange;
width:99.4%;
height:auto;
margin-top:10px;
}
.button{
height: 50px;
width: 200px;
font-size: 23px;
color:white;
margin-bottom: 0px;
border-radius: 3px;
border: 2px solid rgba(0,8,255);
font-family: '微软雅黑';
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
background-color: lightgreen;
cursor:url('https://livefile.xesimg.com/programme/python_assets/625dc4e9a540dcbf8d9232a2dc03d81d.svg'),auto;
}
.button:hover{
color: white;
background-color: orange;
}
input,textarea,select{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0 3px 3px;
margin: 5px 1px 3px 0;
border: black 1px solid;
border-radius: 5px;
font-size:16px;
font-family:Tahoma,'微软雅黑';
height:120px;
width:500px;
background-color: white;
color: black;
cursor:url('https://livefile.xesimg.com/programme/python_assets/aa268f99c0d2b2680292c877bb1fdb60.svg'),auto;
}
input:focus,textarea:focus,select:focus {
box-shadow: 0 0 5px green;
padding: 3px 0 3px 3px;
margin: 5px 1px 3px 0;
border: green 1px solid;
background-color: orange;
color:white;
cursor:url('https://livefile.xesimg.com/programme/python_assets/22e1248d3561fdb6c7c22f6c07c3cd0b.svg'),auto;
}
input:hover,textarea:hover,select:hover {
border: white 1px solid;
}
span{
cursor:url('https://livefile.xesimg.com/programme/python_assets/aa268f99c0d2b2680292c877bb1fdb60.svg'),auto;
}
u{
color: red;
}
u:hover{
background-color: red;
color:white;
}
</style>
<div align="center">
<h1 class="title" style="background-color:">
GMstore.com
</h1>
</br>
<span style="font-family:'微软雅黑';font-size:20px">

<span style="font-family:'微软雅黑';font-size:18px;color:blue;">
<u2>
此网站由原创工作室出品
</u2>
</span>

</span>
<hr style="height:1px;border:none;border-top:2px dashed #6346CC;"/>
</div>
<text2>
hey~欢迎来到gmstore.com~
</text2>
</br>
<text2>
<u>
此网页可能是所有主页做得做得最好的
</u>
</text2>
<hr style="height:1px;border:none;border-top:2px dashed #silver;"/>
<span style="font-size:35px;font-family:'微软雅黑';color:red">

</span>
<catalogue>
首先呢，先弄一个快速导航系统
</catalogue>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#1.
</span>
<a href="#title1"style="font-size:20px;font-family:'微软雅黑';">
品牌介绍
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#2.
</span>
<a href="#title2"style="font-size:20px;font-family:'微软雅黑';">
优秀作品
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#3.
</span>
<a href="#title3"style="font-size:20px;font-family:'微软雅黑';">
搜索
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#4.
</span>
<a href="#title4"style="font-size:20px;font-family:'微软雅黑';">
音乐
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#5.
</span>
<a href="#title5"style="font-size:20px;font-family:'微软雅黑';">
自我介绍
</a>
</br>
<catalogue id="title1">
然后，进入「程序入口」
</catalogue>
</br>
<button οnclick="document.getElementById('code').style.display='block';">
程序入口&品牌介绍
</button>
<div id="code"class="bor">
<script>
document.getElementById('code').style.display='none';
</script>
<span style="font-size:20px;font-family:'微软雅黑';color:red">
1.
</span>
<a href="/代码雨.html">
<button class="button">
代码雨
</button>
</a>
</br>
<span style="font-size:20px;font-family:'微软雅黑';color:red">
2.
</span>
<a href="/关机.html">
<button class="button">
关机
</button>
</a>
</br>
<span style="font-size:20px;font-family:'微软雅黑';color:red">
3.
</span>
<a href="/时钟.html">
<button class="button">
时钟
</button>
</a>
</br>
<span style="font-size:20px;font-family:'微软雅黑';color:red">
4.
</span>
<a οnclick="document.getElementById('ciyun').style.display='block';">
<button class="button">
个人主页
</button>
</a>
<div id="ciyun"class="bor">
<script>
document.getElementById('ciyun').style.display='none';
</script>
<a href="https://code.xueersi.com/space/18313830">
<button class="button">
传送门>
</button>
</a>
</div>
</br>
<span style="font-size:20px;font-family:'微软雅黑';color:red">
5.
</span>
<a href="http://127.0.0.1:55824/%E7%81%B5%E5%8A%A8%E5%B2%9B.html">
<button class="button">
灵动岛
</button>
</a>
</div>
<hr style="height:1px;border:none;border-top:2px dashed #0066CC;"/>
<span style="font-size:35px;font-family:'微软雅黑';color:red">
@
</span>
<catalogue id="title2">
紧接着，来到「优秀作品」
</catalogue>
</br>
<button οnclick="document.getElementById('youlian').style.display='block';">
打开优秀作品
</button>
<div id="youlian"class="bor">
<script>
document.getElementById('youlian').style.display='none';
</script>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#1.
</span>
<a href="https://code.xueersi.com/space/70144641"style="font-size:20px;font-family:'微软雅黑';">
gmstore介绍
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#2.
</span>
<a href="https://code.xueersi.com/home/project/detail?lang=code&pid=53261175&version=offline&form=python&langType=python"style="font-size:20px;font-family:'微软雅黑';">
Gphome m13
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#3.
</span>
<a href=""style="font-size:20px;font-family:'微软雅黑';">
春月C3
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#4.
</span>
<a href="https://code.xueersi.com/home/project/detail?lang=code&pid=53686196&version=offline&form=python&langType=python"style="font-size:20px;font-family:'微软雅黑';">
百花丛46.0
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#5.
</span>
<a href="https://gmstore.com/"style="font-size:20px;font-family:'微软雅黑';">
https://gmstore.com/
</a>
</br>
<span style="font-size:25px;font-family:'微软雅黑';color:red">
#6.
</span>
<a href="https://liligongzuoshi.mysxl.cn/"style="font-size:20px;font-family:'微软雅黑';">
https://gm.inc.com/
</a>
</div>
<hr style="height:1px;border:none;border-top:2px dashed #0066CC;"/>
<span style="font-size:35px;font-family:'微软雅黑';color:red">
#
</span>
<catalogue id="title3">
“有事搜一搜，没事看一看”
</catalogue>
</br>
<button οnclick="document.getElementById('sou').style.display='block';">
搜搜康>
</button>
<div id="sou"class="bor"align="center">
<script>
document.getElementById('sou').style.display='none';
</script>
<textarea style="border-radius: 5px;font-size:20px;font-family:Tahoma,微软雅黑;"id="neirong"placeholder="有事搜一搜，没事看一看"></textarea>
</br>
<select id="yinqing"style="border-radius: 5px;font-size:16px;font-family:Tahoma,微软雅黑;height:40px;width:300px;">
<option value="1" select="selected">
百度搜索
</option>
<option value="2">
360搜索
</option>
<option value="3">
必应搜索
</option>
<option value="4">
搜狗搜索
</option>
<option value="5">
学而思编程社区搜索
</option>
<option value="6">
B（bilibili）站搜索
</option>
<option value="7">
站内搜索
</option>
</select>
<button class="button"οnclick="search()">
C亿下
</button>
</div>
<script>
function search(){
var neirong=document.getElementById('neirong')['value'];
var yinqing=document.getElementById('yinqing')['value'];
if(neirong==''){
return false;
}
if(yinqing=='1'){
window.location.href="http://www.baidu.com/s?wd="+neirong
}
if(yinqing=='2'){
window.location.href="https://www.so.com/s?ie=utf-8&src=360se7_addr&q="+neirong
}
if(yinqing=='3'){
window.location.href="https://cn.bing.com/search?q="+neirong
}
if(yinqing=='4'){
window.location.href="https://www.sogou.com/web?query="+neirong
}
if(yinqing=='5'){
window.location.href="https://code.xueersi.com/search-center?keyword="+neirong
}
if(yinqing=='6'){
window.location.href="https://search.bilibili.com/all?keyword="+neirong
}
if(yinqing=='7'){
document.getElementById("bottom").style.display="block";
document.getElementById('tishi').innerHTML = 'http://127.0.0.1:55824/code/a/index.html/search='+neirong;
}
}
</script>
<script>
document.getElementById("bottom").style.display="none";
</script>
<div align="center"id="bottom">
<div id="bottom">
<span style="font-family:'宋体';font-size:33px">
error:
</span>
<span style="font-family:'宋体';font-size:28px">
<b>
404。
</b>
</br>
链接为
<span style="color:blue"id="tishi"></span>
 连接失败。
</br>
</span>
<script>
document.getElementById("bottom").style.display="none";
function guanbi(){
document.getElementById('bottom').style.display='none';
}
</script>
<span οnclick="document.getElementById('bottom').style.display='none';"style=" cursor:url('https://livefile.xesimg.com/programme/python_assets/625dc4e9a540dcbf8d9232a2dc03d81d.svg'),auto;color:blue;font-size:30px">
【关闭弹窗|×】
</span>
</div>
</div>
<style>
#bottom{
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
background:darkgrey;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 2px 2px rgba(0,0,0,.2);
background-color:lightgreen;
z-index: 100;
color:red;
}
</style>
<hr style="height:1px;border:none;border-top:2px dashed #0066CC;"/>
<span style="font-size:35px;font-family:'微软雅黑';color:red">
@
</span>
<catalogue id="title4">
逛累了？那就听点「音乐」吧~
</catalogue>
</br>
<button οnclick="document.getElementById('music').style.display='block';">
音乐列表
</button>
<div id="music"class="bor">
<script>
document.getElementById('music').style.display='none';
</script>
1.
<a href="https://static0.xesimg.com/pythonweb/%E5%8F%AF%E5%A4%9A%E9%9F%B3%E4%B9%90/music/1-1.mp3">
<button class="button">
半生雪
</button>
</a>
</br>
2.
<a href="https://static0.xesimg.com/pythonweb/%E5%8F%AF%E5%A4%9A%E9%9F%B3%E4%B9%90/music/1-2.mp3">
<button class="button">
大风吹
</button>
</a>
</br>
3.
<a href="https://static0.xesimg.com/pythonweb/%E5%8F%AF%E5%A4%9A%E9%9F%B3%E4%B9%90/music/1-6.mp3">
<button class="button">
起风了
</button>
</a>
</br>
4.
<a href="https://static0.xesimg.com/pythonweb/%E5%8F%AF%E5%A4%9A%E9%9F%B3%E4%B9%90/music/1-7.mp3">
<button class="button">
踏山河
</button>
</a>
</br>
5.
<a href="https://static0.xesimg.com/pythonweb/%E5%8F%AF%E5%A4%9A%E9%9F%B3%E4%B9%90/music/1-8.mp3">
<button class="button">
雾里
</button>
</a>
</br>
6.
<a href="https://static0.xesimg.com/pythonweb/%E5%8F%AF%E5%A4%9A%E9%9F%B3%E4%B9%90/music/1-3.mp3">
<button class="button">
少年
</button>
</a>
</br>
7.
<a href="https://livefile.xesimg.com/programme/python_assets/84dc0bba4f904ad9c05ef61609ce561a.mp3">
<button class="button">
勇敢勇敢
</button>
</a>
</br>
8.
<a href="https://livefile.xesimg.com/programme/python_assets/f2e7e2ea86744b6511963a069c7ccb19.mp3">
<button class="button">
孤勇者
</button>
</a>
</div>
<hr style="height:1px;border:none;border-top:2px dashed #0066CC;"/>
<span style="font-size:35px;font-family:'微软雅黑';color:red">
@
</span>
<catalogue id="title5">
对了！还没我认识我呢！「自我介绍」
</catalogue>
</br>
<style>
.background{
background-color: rgba(255,255,255,0.6);
padding: 15px;
margin-bottom: 10px;
border-radius:5px ;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}
</style>
<button οnclick="document.getElementById('zwjs').style.display='block';">
自我介绍
</button>
<div id="zwjs"class="background">
<script>
document.getElementById('zwjs').style.display='none';
</script>
<span style="font-size:30px;font-family:'微软雅黑'">
自我介绍
</span>
</br>
<span style="font-size:25px;font-family:'微软雅黑'">

</span>

</br>
<span style="font-size:25px;font-family:'微软雅黑'">
网站：
</span>
<br>
C站：https://code.xueersi.com/space/18313830
<br>
CSDN: https://blog.csdn.net/Inin888yoxi?spm=1000.2115.3001.5343
<br>
妙小程：https://xuexi.miaocode.com/profile/516132
</br>
<i>
别问我为什么我不直接写到此网站
</i>
</div>
<style>
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(193,193,193);
}

::-webkit-scrollbar-thumb:window-inactive {
background: rgba(193,193,193);
}

::-webkit-scrollbar-thumb:vertical:hover{
background-color: rgba(168,168,168);
}
::-webkit-scrollbar-thumb:vertical:active{
background-color: rgba(120,120,120);
}
.di{
width:100%;
height:auto;
background:#00c78c;
color:white;
}
*{
   padding: 0;
   margin: 0;
}
::selection {
   background:orange;
   color:#00c78c;
}
</style>
<div class="di"align="center">
<span style="font-size:20px;font-family:微软雅黑;">
<a href="https://code.xueersi.com/space/18313830">
<img src="https://static0.xesimg.com/talcode/assets/logo.ico">
</a>
 
|
 
<a href="https://www.ccw.site">
<img style="height:40px;width:40px;"src="https://m.xiguacity.cn/community/images/logo-ccw.png">
</a>
 
|
 
<a href=" https://blog.csdn.net/Inin888yoxi?spm=1000.2115.3001.5343">CSDN:
<img style="height:40px;width:40px;"src="https://g.csdnimg.cn/static/logo/favicon32.ico">

</a>
 
|
 
<a href="https://xuexi.miaocode.com/profile/516132">
<img width="40" height="40" src="https://static0.xesimg.com/programme/python_assets/ffaafdb114e8c8dd58fdf191148d4f4d.jpeg">

</a>
</br>
Copyright © 2019-2024 wanghaoxiang https://gmstore.com/ @王浩翔版权所有
</span>
</div>
<script>
function ding(){
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
</script>

<script type="text/javascript">
var scrollTop=0,topValue=getScrollTop();
document.οnscrοll=function(e){
scrollTop = getScrollTop();
if(scrollTop<=topValue){
document.getElementById("shang").style.display="block";
document.getElementById("xia").style.display="none";
}
else{
document.getElementById("shang").style.display="none";
document.getElementById("xia").style.display="block";
}
setTimeout(function(){topValue=scrollTop;},0);
};
function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}
else if(document.body){
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
</script>

<script>
window.onscroll = function(){
var gaodu = document.documentElement.scrollTop || document.body.scrollTop
if(gaodu >= 1){
document.getElementById("ding").style.display="block";
}else{
document.getElementById("ding").style.display="none";
}
}
</script>

<style>
text::selection {
   background:#00c78c;
   color:#00c78c;
}
#ding{
top: 0;
width:100%;
height:auto;
position: fixed;
margin-bottom: 0px;
background-color:#00fa9a;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 2px 2px rgba(0,0,0,.2);
}
#button{
width:500px;
height:100px;
border:2px solid blue;
}
</style>
<script>
function custom(){
if(confirm("你真的关闭此网页吗？")){
window.opener=null;
window.open('','_self');
window.close();
}
else{
alert("【404】Error! Please try again later.");
}
}
</script>
<div align="center"id="ding">
<script>
document.getElementById("ding").style.display="none";
document.getElementById("shang").style.display="none";
document.getElementById("xia").style.display="none";
</script>
<span id="xia"style="color:white;font-family:'微软雅黑';font-size:24px">
<span style="font-size:40px;"class="title">
<b>
gmstore.com
</b>
</span>
</br>
<span style="background-color:orange">
导航：
<a href="#title1">
程序入口&品牌故事
</a>
,
<a href="#title2">
优秀程序
</a>
,
<a href="#title3">
搜索
</a>
,
<a href="#title4">
音乐
</a>
,
<a href="#title5">
自我介绍
</a>
<span style="font-family:'微软雅黑';font-size:22px; color:white">
√ 检测到网页下移
</span>
</span>
</span>
<span id="shang"style="color:white;font-family:'微软雅黑';font-size:20px">
<span style="font-size:40px;"class="title">
<b>
gmstore.com
</b>
</span>
</br>
功能：
<a href="https://code.xueersi.com/ide/code/47416728">
查看网页源码
</a>
，
<a οnclick="ding()">
返回顶部
</a>
，
<a οnclick="custom()">
关闭窗口
</a>
<span style="font-family:'微软雅黑';font-size:22px;background-color:orange">
√ 检测到网页上移
</span>
</span>
</div>
<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(50, 120), e.clientX, e.clientY);
document.body.classList.add("is-pressed");
longPress = setTimeout(function(){
document.body.classList.add("is-longpress");
longPressed = true;
}, 10);
}, 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>
<style type="text/css">
/* 在小屏幕自动隐藏 */
@media screen and (max-width:600px){
.dandelion{display: none !important;}
}
.dandelion span {
display: block;
position: fixed;
z-index: 9999999999;
bottom: 0px;
background-image: url(data:image/png;base64,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);
background-repeat: no-repeat;
_background: none;
/* 动画效果 */
-webkit-animation: ball-x 3s linear 2s infinite;
-moz-animation: ball-x 3s linear 2s infinite;
animation: ball-x 3s linear 2s infinite;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center;
}
/* 大的蒲公英样式 */
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 41px;
background-position: -86px -36px;
border: 0px solid #00ffff;
}
/* 小的蒲公英样式 */
.dandelion .smalldan {
width: 36px;
height: 60px;
left: 88px;
background-position: 0 -90px;
border: 0px solid #fff;
}
/* 以下是动画效果 */
@keyframes ball-x {
0% { transform:rotate(0deg);}
25% { transform:rotate(5deg); }
50% { transform:rotate(0deg);}
75% { transform:rotate(-5deg);}
100% { transform:rotate(0deg);}
}
@-webkit-keyframes ball-x {
0% { -webkit-transform:rotate(0deg);}
25% { -webkit-transform:rotate(5deg); }
50% { -webkit-transform:rotate(0deg);}
75% { -webkit-transform:rotate(-5deg);}
100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
0% { -moz-transform:rotate(0deg);}
25% { -moz-transform:rotate(5deg); }
50% { -moz-transform:rotate(0deg);}
75% { -moz-transform:rotate(-5deg);}
100% { -moz-transform:rotate(0deg);}
}
</style>
<div class="dandelion">
<span class="smalldan"></span>
<span class="bigdan"></span>
</div>
</body>
</html>