Kendim denedim incelemenizi isterim
<head>
<body>
<div class="star1"></div>
<div class="star2"></div>
<div class="home">
<span id="tip">Buradasınız, Dilek Tut!<br>Ejderhayı Çağırmak için Tıklayın</span>
<button id="start">
<div class="start-text">
<span>Şen<br>Ron</span>
</div>
</button>
</div>
<div class="main" id="main">
<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<div id="dragon">
<canvas id="myCanvas2">
Your browser does not support the HTML5 canvas tag.
</canvas>
<h1 class="wish">Ne istersen söyle.<span> </span></h1>
<h1 class="wish_ed">Dileğin Kabul Edildi<span> </span></h1>
</div>
</body>
<style>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root{
--shakeRange1: 2px;
--shakeRange2: 7px;
--bg: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);;
}
body{
background: var(--bg);
overflow: hidden;
}
.like {
position: absolute;
left: 0;
top: 16px;
z-index: 1;
font-size: 18px;
color: red;
font-weight: bold;
animation: like .5s infinite;
}
@keyframes like {
50% {
color: #6ff12c;
transform: translate(20px);
}
}
.main {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: var(--bg);
display: flex;
justify-content: center;
align-items: center;
}
#myCanvas {
}
.reduce {
animation: reduce var(--reduceTime) ease-out forwards;
}
@keyframes reduce {
to {
transform: scale(.3);
-webkit-transform: scale(.3);
}
}
.shadow {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: var(--ballR);
height: var(--ballR);
border: none;
border-radius: 50%;
background-color: #f0e34c;
box-shadow: inset 0 0 var(--ballR) var(--ballR) #f0e34c, 0 0 20px 30px #f0e34c;
animation: shadow 1.2s ease-in forwards;
opacity: 0;
overflow: visible;
}
@keyframes shadow {
from{
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
10%{
transform: translate(-50%, -50%) scale(1);
}
50%{
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
to {
box-shadow: inset 0 0 var(--ballR) var(--ballR) #f0e34c, 0 0 20px 40px rgb(240, 227, 76,1), 0 0 40px 80px rgb(240, 227, 76,.8), 0 0 80px 120px rgb(240, 227, 76,.6),
0 0 130px 160px rgb(240, 227, 76,.4),0 0 170px 120px rgb(240, 227, 76,.2);
opacity: 1;
}
}
.light{
position: absolute;
bottom: var(--ballR);
left: 50%;
z-index: -1;
transform: translateX(-50%);
width: calc(var(--ballR) / 10);
height: calc(var(--ballR) / 10);
border-radius: 0 0 400px 400px;
background: #fff;
filter: brightness(1.5);
box-shadow: 0 0 40px 60px #fff;
/* filter: drop-shadow(0 0 40px); */
opacity: 0;
transform-origin: center bottom;
animation: light 1.4s forwards;
animation-delay: 1.4s;
animation-timing-function:cubic-bezier(0.075, 0.885, 0.32, 1.275);
}
@keyframes light {
0%{
opacity: 0;
}
25%{
opacity: 1;
}
50% {
--shakeRange2: 20px;
}
to{
height: 50vh;
opacity: 1;
}
}
#dragon{
display: none;
position: fixed;
top: 0;
left: 0;
background: var(--bg);
filter: blur(400px) drop-shadow(0 0 100px #fff);
animation: dragon .8s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
}
@keyframes dragon {
to{
box-shadow: none;
filter: none;
}
}
.shake {
animation: shake .4s ease-in infinite;
}
.call-dragon{
animation: none !important;
}
@keyframes shake {
10%,90% {
transform: translate3d(- var(--shakeRange1),0,0)
}
20%,80% {
transform: translate3d(4px,0,0)
}
30%,70% {
transform: translate3d(- var(--shakeRange2),0,0)
}
40%,60% {
transform: translate3d(var(--shakeRange2),0,0)
}
50% {
transform: translate3d(- var(--shakeRange2),0,0)
}
}
#start{
position: relative;
z-index: 99;
border: none;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
background: url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6223e1d3a4ca43b89324727365049930~tplv-k3u1fbpfcp-watermark.image');
background-size: contain;
cursor: pointer;
font-family: cursive,"open-sans","Roboto",sans-serif;
font-weight: bold;
font-size: 36px;
color: #fff;
white-space: pre-wrap;
animation: btn .6s linear infinite;
}
.start-text{
position: absolute;
left: 14%;
top: 26%;
width: 64%;
height: 64%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.2;
vertical-align: middle;
}
@keyframes btn{
10%,90% {
transform: translate3d(0,2px,0);
filter: drop-shadow(0 0 30px yellow);
}
20%,80% {
transform: translate3d(0,3px,0);
filter: drop-shadow(0 0 3px yellow);
}
30%,70% {
transform: translate3d(0,-5px,0);
filter: drop-shadow(0 0 30px yellow);
}
40%,60% {
transform: translate3d(0,5px,0);
filter: drop-shadow(0 0 3px yellow);
}
50% {
transform: translate3d(0,-5px,0);
filter: drop-shadow(0 0 30px yellow);
}
}
.home{
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%,-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#tip{
width: 100%;
margin-bottom: 14px;
font-family: cursive,"open-sans","Roboto",sans-serif;
font-size: 26px;
color: #fff;
text-align: center;
}
@keyframes wish {
from{
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes typing {
from {
width: 100%;
}
to {
width: 0;
border: none;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: #fff;
}
}
h1 {
position: fixed;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
width: fit-content;
padding: 2px 0;
font-family: monospace;
font-size: 28px;
color: #fff;
letter-spacing: 6px;
line-height: 1;
white-space: nowrap;
animation: wish 1s 3s steps(1, end) forwards;
-webkit-animation: wish 1s 3s steps(1, end) forwards;
}
.wish span {
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 32px;
background: #001c04;
border-left: .1em solid #fff;
box-sizing: border-box;
animation: typing 2s steps(6, end) forwards,
blink-caret 1s step-end infinite;
-webkit-animation: typing 2s steps(6, end) forwards,
blink-caret 1s step-end infinite;
animation-delay: 1s;
}
.wish_ed{
letter-spacing: 2px;
animation: none;
display: none;
}
.wish_ed span{
animation-duration: 2.4s;
animation-timing-function: steps(9, end);
}
.star1{
position: absolute;
z-index: 1;
width: 1px;
height: 1px;
box-shadow: 1429px 511px #FFF, 1611px 119px #FFF, 1686px 956px #FFF, 1163px 1929px #FFF, 912px 1242px #FFF, 490px 469px #FFF, 869px 425px #FFF, 1447px 891px #FFF, 422px 1960px #FFF, 517px 1995px #FFF, 738px 171px #FFF, 1328px 1668px #FFF, 874px 1490px #FFF, 83px 81px #FFF, 632px 98px #FFF, 1518px 1764px #FFF, 636px 596px #FFF, 1178px 131px #FFF, 278px 1179px #FFF, 1898px 1951px #FFF, 1787px 326px #FFF, 186px 1588px #FFF, 552px 1942px #FFF, 1929px 1300px #FFF, 802px 681px #FFF, 430px 1711px #FFF, 1192px 308px #FFF, 123px 1604px #FFF, 880px 169px #FFF, 1400px 632px #FFF, 500px 1165px #FFF, 288px 1208px #FFF, 319px 1419px #FFF, 1170px 980px #FFF, 1608px 784px #FFF, 1735px 1276px #FFF, 966px 1534px #FFF, 654px 783px #FFF, 1366px 964px #FFF, 1213px 60px #FFF, 302px 1509px #FFF, 845px 714px #FFF, 524px 323px #FFF, 1538px 1399px #FFF, 394px 619px #FFF, 680px 26px #FFF, 353px 776px #FFF, 1826px 1450px #FFF, 1909px 1452px #FFF, 1014px 1315px #FFF, 1883px 1474px #FFF, 766px 1742px #FFF, 1693px 658px #FFF, 1186px 302px #FFF, 376px 1575px #FFF, 712px 1739px #FFF, 1627px 299px #FFF, 482px 224px #FFF, 1379px 510px #FFF, 1543px 1602px #FFF, 45px 606px #FFF, 827px 1336px #FFF, 224px 1939px #FFF, 1098px 1342px #FFF, 813px 1553px #FFF, 825px 419px #FFF, 519px 894px #FFF, 1406px 797px #FFF, 1341px 274px #FFF, 1787px 903px #FFF, 1701px 1483px #FFF, 1108px 232px #FFF, 1599px 1409px #FFF, 659px 870px #FFF, 1538px 335px #FFF, 632px 1855px #FFF, 154px 1026px #FFF, 1722px 979px #FFF, 1339px 509px #FFF, 1833px 460px #FFF, 315px 65px #FFF, 496px 1927px #FFF, 1314px 427px #FFF, 344px 1046px #FFF, 1658px 724px #FFF, 1899px 264px #FFF, 1200px 1305px #FFF, 1562px 339px #FFF, 159px 766px #FFF, 1639px 1966px #FFF, 459px 1898px #FFF, 944px 763px #FFF, 1174px 1056px #FFF, 1825px 790px #FFF, 906px 1526px #FFF, 1537px 1303px #FFF, 79px 1105px #FFF, 1318px 672px #FFF, 1232px 61px #FFF, 709px 1078px #FFF, 1010px 1810px #FFF, 777px 1160px #FFF, 1598px 1428px #FFF, 815px 684px #FFF, 1003px 943px #FFF, 1876px 1003px #FFF, 1025px 1529px #FFF, 66px 549px #FFF, 514px 457px #FFF, 262px 1005px #FFF, 812px 1705px #FFF, 1163px 1087px #FFF, 165px 45px #FFF, 677px 1462px #FFF, 580px 1675px #FFF, 1848px 1384px #FFF, 449px 862px #FFF, 1629px 1979px #FFF, 667px 135px #FFF, 240px 53px #FFF, 1919px 1832px #FFF, 696px 1384px #FFF, 1630px 361px #FFF, 878px 663px #FFF, 1226px 1723px #FFF, 765px 686px #FFF, 576px 1647px #FFF, 97px 1602px #FFF, 1117px 1049px #FFF, 1433px 68px #FFF, 1375px 1991px #FFF, 1755px 990px #FFF, 1483px 801px #FFF, 473px 1802px #FFF, 822px 768px #FFF, 196px 577px #FFF, 516px 504px #FFF, 623px 981px #FFF, 1478px 819px #FFF, 126px 384px #FFF, 584px 1908px #FFF, 1549px 521px #FFF, 1866px 1335px #FFF, 586px 342px #FFF, 1698px 642px #FFF, 136px 188px #FFF, 1613px 520px #FFF, 937px 326px #FFF, 1111px 169px #FFF, 229px 229px #FFF, 1357px 20px #FFF, 725px 1305px #FFF, 23px 1977px #FFF, 426px 1945px #FFF, 1628px 1530px #FFF, 256px 1295px #FFF, 58px 78px #FFF, 409px 1145px #FFF, 1607px 767px #FFF, 212px 144px #FFF, 361px 1890px #FFF, 1827px 1451px #FFF, 1875px 645px #FFF, 571px 853px #FFF, 1302px 301px #FFF, 9px 1344px #FFF, 418px 619px #FFF, 1941px 90px #FFF, 949px 640px #FFF, 179px 1783px #FFF, 1104px 360px #FFF, 1723px 370px #FFF, 1122px 1418px #FFF, 1374px 508px #FFF, 1108px 1089px #FFF, 1440px 1743px #FFF, 462px 1495px #FFF, 1187px 265px #FFF, 567px 74px #FFF, 557px 542px #FFF, 967px 673px #FFF, 825px 1971px #FFF, 988px 1260px #FFF, 710px 1206px #FFF, 538px 1805px #FFF, 137px 861px #FFF, 1922px 1313px #FFF, 481px 470px #FFF, 1224px 316px #FFF, 1979px 239px #FFF, 22px 1155px #FFF, 1640px 186px #FFF, 592px 1709px #FFF, 765px 170px #FFF, 129px 1750px #FFF, 788px 719px #FFF, 181px 1327px #FFF, 433px 1455px #FFF, 141px 450px #FFF, 1287px 1027px #FFF, 1278px 1462px #FFF, 688px 1526px #FFF, 463px 1604px #FFF, 1232px 297px #FFF, 920px 1227px #FFF, 1571px 1765px #FFF, 1482px 1316px #FFF, 759px 1463px #FFF, 950px 1166px #FFF, 1532px 1588px #FFF, 608px 267px #FFF, 1862px 1943px #FFF, 805px 717px #FFF, 1803px 1319px #FFF, 1821px 683px #FFF, 995px 1958px #FFF, 484px 932px #FFF, 366px 901px #FFF, 451px 1563px #FFF, 1704px 1471px #FFF, 1379px 44px #FFF, 1778px 472px #FFF, 419px 1806px #FFF, 1545px 222px #FFF, 1563px 777px #FFF, 39px 964px #FFF, 1620px 24px #FFF, 1151px 320px #FFF, 1940px 1426px #FFF, 1555px 1538px #FFF, 1747px 488px #FFF, 1348px 300px #FFF, 990px 538px #FFF, 780px 361px #FFF, 988px 971px #FFF, 1973px 1534px #FFF, 1542px 1829px #FFF, 1557px 216px #FFF, 1404px 641px #FFF, 47px 877px #FFF, 65px 1738px #FFF, 1895px 1798px #FFF, 56px 591px #FFF, 536px 906px #FFF, 568px 74px #FFF, 433px 462px #FFF, 727px 295px #FFF, 876px 1878px #FFF, 1891px 1946px #FFF, 1451px 493px #FFF, 1569px 226px #FFF, 879px 1351px #FFF, 1529px 43px #FFF, 33px 74px #FFF, 1516px 1924px #FFF, 878px 323px #FFF, 455px 1122px #FFF, 1943px 526px #FFF, 1456px 1060px #FFF, 1631px 979px #FFF, 1819px 1324px #FFF, 1660px 1192px #FFF, 1867px 1714px #FFF, 1928px 1940px #FFF, 1618px 744px #FFF, 979px 357px #FFF, 98px 1645px #FFF, 1898px 1207px #FFF, 1134px 16px #FFF, 1313px 1018px #FFF, 717px 812px #FFF, 1503px 234px #FFF, 1612px 188px #FFF, 29px 459px #FFF, 414px 1487px #FFF, 1223px 1730px #FFF, 1643px 1188px #FFF, 424px 767px #FFF, 1692px 1591px #FFF, 1265px 367px #FFF, 54px 832px #FFF, 410px 804px #FFF, 1397px 1242px #FFF, 549px 1484px #FFF, 721px 1088px #FFF, 472px 1240px #FFF, 1927px 514px #FFF, 1303px 1310px #FFF, 71px 1276px #FFF, 829px 1332px #FFF, 84px 1920px #FFF, 1088px 375px #FFF, 1659px 736px #FFF, 967px 294px #FFF, 651px 92px #FFF, 1572px 143px #FFF, 1680px 770px #FFF, 1873px 1289px #FFF, 1983px 821px #FFF, 448px 1090px #FFF, 890px 1332px #FFF, 836px 867px #FFF, 1867px 1213px #FFF, 1874px 1574px #FFF, 750px 1063px #FFF, 1297px 1971px #FFF, 1274px 1015px #FFF, 1628px 933px #FFF, 309px 1386px #FFF, 299px 1621px #FFF, 1973px 526px #FFF, 196px 1416px #FFF, 778px 715px #FFF, 1993px 1294px #FFF, 381px 435px #FFF, 1405px 681px #FFF, 1759px 1077px #FFF, 1764px 1748px #FFF, 168px 470px #FFF, 978px 781px #FFF, 110px 1666px #FFF, 835px 747px #FFF, 112px 95px #FFF, 604px 712px #FFF, 1121px 1752px #FFF, 393px 1782px #FFF, 1869px 830px #FFF, 1303px 348px #FFF, 427px 1546px #FFF, 761px 718px #FFF, 946px 674px #FFF, 832px 964px #FFF, 1607px 2000px #FFF, 1624px 1296px #FFF, 1093px 735px #FFF, 1865px 608px #FFF, 933px 1278px #FFF, 1402px 547px #FFF, 1865px 1211px #FFF, 109px 72px #FFF, 249px 1482px #FFF, 586px 1933px #FFF, 911px 1336px #FFF, 697px 853px #FFF, 987px 1797px #FFF, 1371px 933px #FFF, 492px 1896px #FFF, 998px 1866px #FFF, 518px 31px #FFF, 1873px 372px #FFF, 1025px 1308px #FFF, 1478px 965px #FFF, 1934px 934px #FFF, 1048px 1262px #FFF, 1839px 40px #FFF, 1399px 732px #FFF, 735px 416px #FFF, 621px 394px #FFF, 788px 1802px #FFF, 1918px 307px #FFF, 432px 1845px #FFF, 616px 481px #FFF, 921px 798px #FFF, 354px 597px #FFF, 1622px 214px #FFF, 1349px 1983px #FFF, 1033px 1622px #FFF, 1198px 407px #FFF, 1239px 1449px #FFF, 1278px 1978px #FFF, 426px 1264px #FFF, 507px 1341px #FFF, 1956px 818px #FFF, 1041px 277px #FFF, 1371px 639px #FFF, 1224px 419px #FFF, 211px 1106px #FFF, 847px 656px #FFF, 534px 1891px #FFF, 1289px 823px #FFF, 906px 482px #FFF, 347px 1837px #FFF, 1246px 1462px #FFF, 915px 1858px #FFF, 559px 1320px #FFF, 77px 1555px #FFF, 845px 1743px #FFF, 313px 1414px #FFF, 188px 252px #FFF, 509px 637px #FFF, 374px 142px #FFF, 1397px 474px #FFF, 458px 1197px #FFF, 292px 619px #FFF, 1749px 14px #FFF, 1638px 24px #FFF, 563px 1752px #FFF, 1940px 1065px #FFF, 1145px 1030px #FFF, 894px 1470px #FFF, 444px 32px #FFF, 1341px 1136px #FFF, 1941px 412px #FFF, 1328px 785px #FFF, 161px 1740px #FFF, 948px 829px #FFF, 933px 823px #FFF, 1709px 507px #FFF, 1366px 1821px #FFF, 720px 731px #FFF, 162px 682px #FFF, 1684px 882px #FFF, 134px 497px #FFF, 1659px 1701px #FFF, 1186px 446px #FFF, 911px 1435px #FFF, 1814px 1028px #FFF, 1234px 1520px #FFF, 1186px 23px #FFF, 318px 87px #FFF, 1179px 837px #FFF, 1071px 46px #FFF, 1125px 1862px #FFF, 94px 261px #FFF, 1574px 282px #FFF, 1039px 815px #FFF, 1776px 1472px #FFF, 867px 473px #FFF, 901px 215px #FFF, 862px 630px #FFF, 1480px 1673px #FFF, 411px 1896px #FFF, 1335px 944px #FFF, 148px 1235px #FFF, 57px 140px #FFF, 447px 651px #FFF, 1414px 1651px #FFF, 209px 1770px #FFF, 1800px 1590px #FFF, 1304px 1px #FFF, 279px 771px #FFF, 1770px 1398px #FFF, 724px 1201px #FFF, 245px 1145px #FFF, 172px 1951px #FFF, 284px 236px #FFF, 1905px 1307px #FFF, 1948px 574px #FFF, 283px 669px #FFF, 247px 384px #FFF, 224px 619px #FFF, 128px 772px #FFF, 1698px 1405px #FFF, 830px 505px #FFF, 1938px 397px #FFF, 1772px 1001px #FFF, 1454px 808px #FFF, 304px 561px #FFF, 1321px 966px #FFF, 735px 1368px #FFF, 894px 345px #FFF, 1217px 1997px #FFF, 892px 1342px #FFF, 353px 379px #FFF, 1382px 1156px #FFF, 164px 1239px #FFF, 1268px 1859px #FFF, 1385px 1721px #FFF, 16px 283px #FFF, 1819px 200px #FFF, 660px 1111px #FFF, 1679px 1728px #FFF, 463px 596px #FFF, 217px 1834px #FFF, 1879px 538px #FFF, 304px 906px #FFF, 1327px 1347px #FFF, 1226px 1579px #FFF, 1786px 1616px #FFF, 1234px 1982px #FFF, 1868px 1862px #FFF, 814px 948px #FFF, 178px 1837px #FFF, 571px 1701px #FFF, 106px 566px #FFF, 270px 925px #FFF, 1417px 248px #FFF, 609px 1551px #FFF, 992px 1825px #FFF, 1515px 1999px #FFF, 1167px 914px #FFF, 1698px 490px #FFF, 189px 1463px #FFF, 928px 612px #FFF, 1714px 803px #FFF, 535px 402px #FFF, 1000px 379px #FFF, 1610px 574px #FFF, 1882px 1155px #FFF, 1425px 1514px #FFF, 417px 1987px #FFF, 1681px 1059px #FFF, 841px 762px #FFF, 1886px 1098px #FFF, 1785px 236px #FFF, 1950px 950px #FFF, 444px 1937px #FFF, 1364px 540px #FFF, 1971px 225px #FFF, 1624px 868px #FFF, 869px 640px #FFF, 1637px 559px #FFF, 20px 823px #FFF, 409px 177px #FFF, 1804px 1626px #FFF, 388px 527px #FFF, 1385px 1734px #FFF, 988px 1310px #FFF, 443px 599px #FFF, 1780px 434px #FFF, 654px 419px #FFF, 268px 1424px #FFF, 1971px 40px #FFF, 360px 1834px #FFF, 875px 1930px #FFF, 1866px 1885px #FFF, 453px 1670px #FFF, 1696px 1337px #FFF, 604px 1887px #FFF, 1405px 769px #FFF, 1546px 897px #FFF, 595px 1975px #FFF, 32px 1765px #FFF, 896px 1150px #FFF, 1818px 95px #FFF, 444px 49px #FFF, 589px 1796px #FFF, 764px 1965px #FFF, 920px 1803px #FFF, 403px 1997px #FFF, 833px 1282px #FFF, 1127px 1770px #FFF, 1810px 77px #FFF, 1214px 1102px #FFF, 364px 401px #FFF, 1139px 1191px #FFF, 916px 1907px #FFF, 870px 290px #FFF, 688px 678px #FFF, 1523px 34px #FFF, 1265px 1082px #FFF, 1394px 1080px #FFF, 1787px 1738px #FFF, 1682px 755px #FFF, 1955px 832px #FFF, 546px 1577px #FFF, 1062px 1561px #FFF, 344px 826px #FFF, 1442px 782px #FFF, 467px 1477px #FFF, 879px 1439px #FFF, 1672px 268px #FFF, 1317px 1355px #FFF, 1980px 1965px #FFF, 688px 1465px #FFF, 1131px 872px #FFF, 1301px 1656px #FFF, 974px 583px #FFF, 1613px 1467px #FFF, 1976px 1995px #FFF, 1377px 760px #FFF, 1367px 387px #FFF, 1880px 191px #FFF, 711px 876px #FFF, 539px 152px #FFF, 545px 1809px #FFF, 920px 970px #FFF, 1154px 1355px #FFF, 1968px 94px #FFF, 1703px 490px #FFF, 380px 146px #FFF, 1561px 785px #FFF, 1930px 1385px #FFF, 519px 1091px #FFF, 269px 570px #FFF, 109px 1326px #FFF, 1476px 969px #FFF, 1999px 1885px #FFF, 341px 1238px #FFF, 1105px 1076px #FFF, 596px 88px #FFF, 937px 492px #FFF, 1339px 1673px #FFF, 1967px 762px #FFF, 65px 952px #FFF, 111px 93px #FFF, 1011px 1684px #FFF, 377px 1430px #FFF, 1011px 386px #FFF, 1162px 421px #FFF, 196px 617px #FFF, 1407px 1141px #FFF, 1562px 572px #FFF, 316px 690px #FFF, 1600px 1980px #FFF, 1545px 1254px #FFF, 680px 1120px #FFF, 575px 1284px #FFF, 179px 1470px #FFF, 1496px 1506px #FFF, 977px 1376px #FFF, 1282px 708px #FFF, 408px 1427px #FFF, 1173px 1597px #FFF, 1120px 1755px #FFF, 974px 520px #FFF, 979px 384px #FFF, 622px 1116px #FFF, 1307px 866px #FFF, 1188px 1596px #FFF, 858px 1947px #FFF, 861px 1373px #FFF, 857px 43px #FFF, 1878px 499px #FFF, 1297px 535px #FFF, 870px 1286px #FFF, 1452px 448px #FFF, 906px 72px #FFF, 1450px 872px #FFF, 1607px 1755px #FFF, 1071px 1959px #FFF, 976px 879px #FFF, 1435px 284px #FFF, 1601px 496px #FFF, 671px 1713px #FFF, 356px 1148px #FFF, 837px 867px #FFF, 246px 858px #FFF, 1031px 1594px #FFF, 571px 214px #FFF, 1012px 1329px #FFF, 1566px 1142px #FFF, 219px 1376px #FFF, 1580px 1454px #FFF, 690px 1037px #FFF, 1940px 756px #FFF, 1755px 850px #FFF, 1037px 363px #FFF, 25px 515px #FFF, 806px 1571px #FFF, 1266px 1398px #FFF, 695px 791px #FFF, 1838px 950px #FFF, 1578px 27px #FFF, 1692px 1581px #FFF, 1817px 1040px #FFF, 1781px 238px #FFF, 1052px 895px #FFF, 398px 440px #FFF, 1643px 325px #FFF, 79px 848px #FFF, 1295px 326px #FFF, 293px 81px #FFF, 1202px 1580px #FFF, 1441px 100px #FFF, 1295px 1465px #FFF, 1132px 1275px #FFF, 774px 704px #FFF, 1109px 1546px #FFF, 557px 1390px #FFF, 1253px 1224px #FFF, 1063px 1618px #FFF, 1793px 440px #FFF, 890px 1988px #FFF, 814px 424px #FFF, 1390px 1280px #FFF, 1127px 907px #FFF, 1044px 1368px #FFF, 1317px 876px #FFF, 762px 638px #FFF, 965px 747px #FFF, 755px 1945px #FFF, 706px 414px #FFF, 1842px 1673px #FFF, 1158px 1336px #FFF, 989px 1955px #FFF, 1857px 89px #FFF, 1659px 343px #FFF, 509px 1385px #FFF, 1620px 758px #FFF, 1958px 1064px #FFF, 178px 341px #FFF, 1500px 808px #FFF, 20px 1646px #FFF, 1572px 870px #FFF, 1821px 1377px #FFF, 328px 1965px #FFF, 903px 616px #FFF, 1731px 1599px #FFF, 267px 856px #FFF;
animation: star 50s linear infinite;
}
.star2{
position: absolute;
z-index: 1;
width: 3px;
height: 3px;
box-shadow: 1679px 1408px #FFF, 1970px 1504px #FFF, 1789px 965px #FFF, 698px 234px #FFF, 1733px 1854px #FFF, 1060px 271px #FFF, 719px 1744px #FFF, 1707px 1847px #FFF, 1710px 432px #FFF, 1325px 1585px #FFF, 92px 577px #FFF, 163px 1938px #FFF, 1885px 123px #FFF, 1566px 1753px #FFF, 1288px 21px #FFF, 1396px 1908px #FFF, 675px 1466px #FFF, 734px 1557px #FFF, 941px 1885px #FFF, 1692px 6px #FFF, 115px 1183px #FFF, 639px 1044px #FFF, 1171px 1982px #FFF, 1801px 1078px #FFF, 648px 820px #FFF, 1885px 1984px #FFF, 268px 1729px #FFF, 1388px 181px #FFF, 1741px 1280px #FFF, 1719px 1080px #FFF, 12px 932px #FFF, 489px 157px #FFF, 1910px 790px #FFF, 115px 44px #FFF, 1748px 1458px #FFF, 282px 109px #FFF, 1100px 1528px #FFF, 543px 598px #FFF, 1320px 1188px #FFF, 1124px 839px #FFF, 1406px 1289px #FFF, 472px 1376px #FFF, 852px 286px #FFF, 510px 860px #FFF, 700px 306px #FFF, 1822px 1302px #FFF, 15px 19px #FFF, 1360px 420px #FFF, 1483px 42px #FFF, 1287px 1867px #FFF, 1105px 1322px #FFF, 745px 161px #FFF, 431px 1722px #FFF, 855px 1254px #FFF, 860px 1784px #FFF, 1578px 1955px #FFF, 1085px 461px #FFF, 472px 690px #FFF, 23px 1152px #FFF, 1625px 601px #FFF, 1177px 1692px #FFF, 397px 1984px #FFF, 10px 1164px #FFF, 1132px 1557px #FFF, 438px 817px #FFF, 1590px 1236px #FFF, 1037px 1616px #FFF, 533px 941px #FFF, 1163px 1992px #FFF, 1451px 1081px #FFF, 1335px 1578px #FFF, 503px 1556px #FFF, 197px 1725px #FFF, 511px 1397px #FFF, 1514px 1164px #FFF, 1249px 148px #FFF, 947px 1849px #FFF, 1258px 1426px #FFF, 255px 1937px #FFF, 23px 529px #FFF, 578px 230px #FFF, 925px 767px #FFF, 903px 365px #FFF, 1861px 451px #FFF, 1813px 912px #FFF, 1597px 637px #FFF, 195px 626px #FFF, 130px 404px #FFF, 725px 408px #FFF, 1916px 843px #FFF, 1336px 239px #FFF, 1568px 1390px #FFF, 139px 126px #FFF, 1287px 1271px #FFF, 731px 465px #FFF, 1959px 1465px #FFF, 909px 169px #FFF, 838px 1332px #FFF, 464px 1037px #FFF, 1893px 233px #FFF;
animation: star 50s linear infinite;
}
@keyframes star{
to{
opacity: 1;
transform: translateY(-2000px);
}
}</style>
<script>const body = document.getElementsByTagName('body')[0]
const canvas = document.querySelector('#myCanvas')
const main = document.querySelector('#main')
const dragonDom = document.querySelector('#dragon')
const ctx = canvas.getContext("2d");
var ww = window.innerWidth
, wh = window.innerHeight
canvas.width = ww
canvas.height = wh
ctx.translate(ww / 2, wh / 2);
ctx.save()
var isLight = true
, isRotate = false
const starR = 7
const starDR = 15
const ballR = 30
const R = ballR * 4
body.style.setProperty('--ballR', R + 'px')
const list = [1, 2, 4, 7, 3, 6, 5]
function dramDragonBall() {
drawBall(0, 0, 5)
drawSomeFiveStar(5)
let deg = -180
for (let i = 0; i < 6; i++) {
const item = list[i]
let x = Math.cos(Math.PI * 2 / 360 * deg) * R
let y = Math.sin(Math.PI * 2 / 360 * deg) * R
deg += 60
drawBall(x, y, item)
drawSomeFiveStar(item)
}
}
function drawBall(x, y, num) {
ctx.restore()
ctx.save()
ctx.translate(x, y)
ctx.beginPath();
ctx.fillStyle = "#ffa20c";
ctx.arc(0, 0, ballR, 0, 2 * Math.PI);
if (isLight) {
ctx.shadowBlur = 30;
ctx.shadowColor = "yellow";
}
ctx.fill();
}
function drawSomeFiveStar(num) {
let hasCenter = [1, 5, 6, 7].includes(num)
hasCenter && drawFiveStar()
let newNum = hasCenter ? num - 1 : num
let deg = -180
// ctx.save()
// ctx.restore()
if (newNum < 1) return
ctx.save()
for (let i = 0; i < newNum; i++) {
ctx.restore()
ctx.save()
let x = Math.cos(Math.PI * 2 / 360 * deg) * starDR
let y = Math.sin(Math.PI * 2 / 360 * deg) * starDR
deg += 360 / (newNum)
ctx.translate(x, y)
drawFiveStar()
}
ctx.restore()
}
function drawFiveStar() {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * starR, -Math.sin((18 + i * 72) / 180 * Math.PI) * starR);
ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * (starR / 2), -Math.sin((54 + i * 72) / 180 * Math.PI) * (starR / 2));
}
ctx.closePath();
ctx.fillStyle = "#ff0827";
ctx.fill();
// ctx.stroke();
}
setInterval(() => {
isLight = !isLight
}, 400);
var timer
, speed = 100
, player
function init() {
ctx.clearRect(-ww, -wh, 2 * ww, 2 * wh);
if (isRotate) {
// if(!player){
// let mp3Url = 'https://s1.aigei.com/pvaud/aud/mp3/67/67d5ef5c8df84263af80e7493c9cbca9.mp3?e=1680401160&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:P2MUKx_Bwa6uUaNP_ZzzpxKwEIo='
// player = new Audio(mp3Url);
// player.play()
// }
ctx.restore()
ctx.rotate(Math.PI / speed);
speed -= 1
if (speed == 25) {
try {
let mp3Url = "https://s1.aigei.com/pvaud/aud/mp3/79/79270e6042464bf9b4f818297ee9d0d0.mp3?e=1680395460&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:9ptXmr2RjgcLhqGBNs30ocq7iL8=";
player = new Audio(mp3Url);
player.play();
} catch (error) {
console.error('播放音频出错', error)
}
}
if (speed == 20) {
const reducetime = 1400
setTimeout(() => {
canvas.classList.add('reduce')
}, reducetime - 500)
setTimeout(() => {
const odiv = document.createElement('div')
const odiv2 = document.createElement('div')
odiv.className = 'shadow'
odiv2.className = 'light'
odiv.appendChild(odiv2)
odiv.addEventListener('animationend', onanimationend1)
odiv2.addEventListener('animationend', onanimationend2)
document.querySelector('.main').appendChild(odiv)
}, reducetime);
body.style.setProperty('--reduceTime', reducetime / 1000 + 's')
}
if (speed < 1) cancelAnimationFrame(timer)
}
dramDragonBall()
timer = requestAnimationFrame(init)
}
const onanimationend1 = () => {
document.querySelector('.main').classList.add('shake')
}
const onanimationend2 = () => {
// document.getElementById('dragon').style.display = 'block'
player && (player.currentTime = 18)
cancelAnimationFrame(timer)
main.style.display = 'none'
dragon()
}
// dramDragonBall()
start.onclick = () => {
init()
start.style.display = 'none'
tip.style.display = 'none'
setTimeout(() => {
isRotate = true
}, 1500);
setTimeout(() => {
cancelAnimationFrame(timer)
}, 8000);
}
var ctx2
function dragon() {
dragonDom.style.display = 'block'
const canvas2 = document.querySelector('#myCanvas2')
ctx2 = canvas2.getContext("2d");
canvas2.width = ww
canvas2.height = wh
ctx2.translate(ww / 2, 140);
ctx2.save()
drawDragon()
setTimeout(dragonLight, 3500)
}
const green1 = '#7dc718'
const green2 = '#5c9d1a'
const pi = Math.PI
function drawDragon() {
ctx2.clearRect(-ww, -wh, 2 * ww, 2 * wh);
ctx2.save()
ctx2.beginPath();
ctx2.shadowBlur = dragonShadow - 10;
ctx2.shadowColor = "yellow";
ctx2.lineWidth = 50
ctx2.strokeStyle = '#7dc718'
ctx2.moveTo(0, 80);
ctx2.bezierCurveTo(100, 10, 180, 110, 70, 150);
ctx2.moveTo(70, 150)
ctx2.bezierCurveTo(-80, 190, -10, 240, 100, 280);
ctx2.moveTo(100, 280)
ctx2.bezierCurveTo(200, 340, 30, 370, 50, 600);
ctx2.stroke();
ctx2.restore()
ctx2.beginPath()
ctx2.lineWidth = 6
ctx2.strokeStyle = green2
ctx2.moveTo(100, 280)
ctx2.lineTo(170, 310)
ctx2.lineTo(200, 300)
ctx2.moveTo(170, 310)
ctx2.lineTo(197, 325)
ctx2.moveTo(170, 310)
ctx2.lineTo(180, 340)
ctx2.stroke();
ctx2.beginPath()
ctx2.moveTo(100, 280)
ctx2.lineTo(70, 310)
ctx2.lineTo(40, 310)
ctx2.moveTo(70, 310)
ctx2.lineTo(50, 330)
ctx2.moveTo(70, 310)
ctx2.lineTo(70, 340)
ctx2.stroke();
ctx2.beginPath()
ctx2.lineWidth = 24
ctx2.strokeStyle = '#fcdd89'
ctx2.moveTo(0, 80);
ctx2.bezierCurveTo(100, 10, 180, 110, 70, 150);
ctx2.moveTo(70, 150)
ctx2.bezierCurveTo(-80, 190, -10, 240, 100, 280);
ctx2.moveTo(100, 280)
ctx2.bezierCurveTo(200, 340, 30, 370, 50, 600);
ctx2.stroke();
ctx2.beginPath();
ctx2.lineWidth = 4
ctx2.fillStyle = '#5c9d1a'
ctx2.arc(0, 80, 70, 1.2 * pi, 1.8 * pi);
ctx2.fill()
ctx2.fillRect(-57, 38, 114, 140);
ctx2.save()
ctx2.beginPath()
ctx2.lineWidth = 6
ctx2.lineCap = "round"
ctx2.strokeStyle = green2
if(dragonShadow > 10) {
ctx2.shadowBlur = dragonShadow - 10;
ctx2.shadowColor = "yellow";
}
ctx2.moveTo(40, 160);
ctx2.bezierCurveTo(230, 300, 170, 20, 430, 80);
ctx2.stroke();
ctx2.save()
ctx2.scale(-1, 1);
ctx2.beginPath()
ctx2.strokeStyle = green2
ctx2.moveTo(40, 160);
ctx2.bezierCurveTo(230, 300, 170, 20, 430, 80);
ctx2.stroke();
ctx2.restore();
ctx2.restore();
ctx2.beginPath();
ctx2.arc(49, 90, 50, 1.55 * pi, .45 * pi);
ctx2.fill()
ctx2.beginPath();
ctx2.arc(-50, 90, 50, .52 * pi, 1.48 * pi);
ctx2.stroke();
ctx2.fill()
ctx2.strokeStyle = '#333'
ctx2.beginPath();
ctx2.moveTo(0, 110)
ctx2.lineTo(0, 160)
ctx2.stroke()
ctx2.save()
ctx2.beginPath();
ctx2.lineWidth = 5
ctx2.strokeStyle = '#333'
ctx2.fillStyle = 'red'
ctx2.shadowBlur = dragonShadow -10;
ctx2.shadowColor = "red";
ctx2.arc(30, 80, 24, 1.9 * pi, .8 * pi);
ctx2.closePath()
ctx2.stroke();
ctx2.fill()
ctx2.save()
ctx2.scale(-1, 1);
ctx2.beginPath();
ctx2.arc(30, 80, 24, 1.9 * pi, .8 * pi);
ctx2.closePath()
ctx2.stroke();
ctx2.fill()
ctx2.restore()
ctx2.restore()
ctx2.beginPath()
ctx2.lineWidth = 4
ctx2.fillStyle = '#f4c417'
ctx2.moveTo(-40, 178)
ctx2.bezierCurveTo(-35, 250, 30, 250, 35, 178);
ctx2.stroke();
ctx2.fill()
ctx2.beginPath()
ctx2.lineWidth = 4
ctx2.fillStyle = '#bd0002'
ctx2.moveTo(-25, 178)
ctx2.bezierCurveTo(-25, 230, 20, 230, 20, 178);
ctx2.stroke();
ctx2.fill()
ctx2.save()
ctx2.beginPath()
ctx2.lineWidth = 4
ctx2.fillStyle = '#7d520a'
ctx2.strokeStyle = '#773c13'
ctx2.shadowBlur = dragonShadow - 10;
ctx2.shadowColor = "yellow";
ctx2.rotate(.1 * pi)
ctx2.rect(20, -110, 20, 120);
ctx2.stroke();
ctx2.rotate(.3 * pi)
ctx2.rect(-10, -80, 20, 40);
ctx2.rotate(-.6 * pi)
ctx2.rect(30, -30, 20, 30);
ctx2.fill()
ctx2.restore()
ctx2.save()
ctx2.beginPath()
ctx2.lineWidth = 4
ctx2.fillStyle = '#7d520a'
ctx2.strokeStyle = '#773c13'
ctx2.shadowBlur = dragonShadow - 10;
ctx2.shadowColor = "yellow";
ctx2.rotate(-.1 * pi)
ctx2.rect(-40, -110, 20, 120);
ctx2.rotate(-.26 * pi)
ctx2.rect(-20, -84, 20, 45);
ctx2.rotate(.6 * pi)
ctx2.rect(-40, -20, 20, 32);
ctx2.stroke();
ctx2.fill()
ctx2.restore()
}
var dragonShadow = 10
var dragonTimer
var dragonShadowAdd = true
var wish
function dragonLight() {
dragonShadow = dragonShadowAdd?dragonShadow+ .5: dragonShadow - 2
drawDragon()
if (dragonShadow > 60) {
dragonShadowAdd = false
dragonTimer = requestAnimationFrame(dragonLight)
}else if(dragonShadow < 20 && !dragonShadowAdd){
dragonShadow = 20
drawDragon()
cancelAnimationFrame(dragonTimer)
wish = document.querySelectorAll('.wish_ed')[0]
wish.classList.add('wish')
wish.style.display = 'block'
}else {
dragonTimer = requestAnimationFrame(dragonLight)
}
}</script>
<link rel="" href="" />
</head>