<!--
* @Author: your name
* @Date: 2021-03-12 15:21:02
* @LastEditTime: 2021-03-12 15:58:16
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \canvasé¢ç²ç¶ææ¬å¨ç»ç¹æ\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0"
/>
<title>ç«é
·çè±è¡¨ç½</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
user-select: none;
margin: 0;
}
.city {
width: 100%;
position: fixed;
bottom: 165px;
z-index: 100999;
}
.city img {
width: 100%;
}
audio {
opacity: 0;
}
.shape {
z-index: 9999 !important;
}
/* éèçè± */
.fireworks {
display: none;
}
</style>
<link rel="stylesheet" href="css/site.min.css" />
</head>
<body>
<!-- å¼åºç½ -->
<div class="prologue">
<canvas class="canvas"></canvas>
<div class="help">?</div>
<div class="ui">
<input class="ui-input" type="text" />
<span class="ui-return">âµ</span>
</div>
<div class="overlay">
<div class="tabs">
<div class="tabs-labels">
<span class="tabs-label">Commands</span
><span class="tabs-label">Info</span
><span class="tabs-label">Share</span>
</div>
<div class="tabs-panels">
<ul class="tabs-panel commands">
<li class="commands-item">
<span class="commands-item-title">Text</span
><span class="commands-item-info" data-demo="Hello :)"
>Type anything</span
><span class="commands-item-action">Demo</span>
</li>
<li class="commands-item">
<span class="commands-item-title">Countdown</span
><span class="commands-item-info" data-demo="#countdown 10"
>#countdown<span class="commands-item-mode"
>number</span
></span
><span class="commands-item-action">Demo</span>
</li>
<li class="commands-item">
<span class="commands-item-title">Icon</span
><span class="commands-item-info" data-demo="#icon thumbs-up"
>#icon<span class="commands-item-mode">name</span> (using
<a
href="https://fortawesome.github.io/Font-Awesome/#icons-new"
target="_blank"
>Font Awesome</a
>)</span
><span class="commands-item-action">Demo</span>
</li>
<li class="commands-item">
<span class="commands-item-title">Time</span
><span class="commands-item-info" data-demo="#time">#time</span
><span class="commands-item-action">Demo</span>
</li>
<li class="commands-item">
<span class="commands-item-title">Rectangle</span
><span class="commands-item-info" data-demo="#rectangle 30x15"
>#rectangle<span class="commands-item-mode"
>width x height</span
></span
><span class="commands-item-action">Demo</span>
</li>
<li class="commands-item">
<span class="commands-item-title">Circle</span
><span class="commands-item-info" data-demo="#circle 25"
>#circle<span class="commands-item-mode">diameter</span></span
><span class="commands-item-action">Demo</span>
</li>
<li class="commands-item commands-item--gap">
<span class="commands-item-title">Animate</span
><span
class="commands-item-info"
data-demo="The time is|#time|#countdown 3|#icon thumbs-up"
><span class="commands-item-mode">command1</span> |<span
class="commands-item-mode"
>command2</span
></span
>
<span class="commands-item-action">Demo</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- çè± -->
<div class="fireworks">
<div class="star comet"></div>
<script src="js/index.js"></script>
<!--çè±é¨å-->
<canvas
id="cas"
style="background-color: rgba(0, 5, 24, 1); z-index: 9999"
>
æµè§å¨ä¸æ¯æcanvas
</canvas>
<!-- åå¸èæ¯ -->
<div class="city">
<img src="img/city.png" alt="" />
</div>
<img src="img/moon.png" alt="" id="moon" style="visibility: hidden" />
<div style="display: none">
<div class="shape">ð2022</div>
<div class="shape">è«è«äººæµ·ä¸</div>
<div class="shape"><img src="./assets/img/01.png" alt="" /></div>
<div class="shape">ç¸è¯äºä½ </div>
<div class="shape">æ¯ä¸ç§ç¼ä»½</div>
<div class="shape">åªå¸æç¨æççè¯</div>
<div class="shape">åªå¸æç¨æççè¯</div>
<div class="shape">ððð</div>
<div class="shape"><img src="./assets/img/01.png" alt="" /></div>
<div class="shape">æ¢åä½ ççæ
</div>
<div class="shape"><img src="./assets/img/02.png" alt="" /></div>
<div class="shape">ððð</div>
</div>
<!--é³ä¹é¨å/å¯æ¿æ¢-->
<!-- <audio autoplay loop id="music">
<source src="mp3/xinnian.mp3" />
</audio> -->
<iframe
id="iframMusic"
allow="autoplay"
style="display: none"
src="mp3/xinnian.mp3"
></iframe>
</div>
<!-- çè±jså
容S -->
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
<!-- çè±jså
容E -->
<!-- å¼åºæå S -->
<script src="js/shape-shifter.js"></script>
<!-- å¼åºæå E -->
</body>
</html>
评论0