IoTgod
5 years ago
parent
80793a89b3
commit
bbca4079ff
10 changed files with 1677 additions and 0 deletions
@ -0,0 +1 @@ |
||||
#about_cover,#view,#view canvas,body,html{height:100%;width:100%}#about,#about_cover,#bt_fs,#ng,.ok{display:none}#about a,#bt_about a,#bt_backtrack a,#bt_feedback a,#bt_start a{color:#fff;text-decoration:none;border-bottom:dashed 1px #fff}body,html{position:absolute;overflow:hidden;text-align:center;background:#8cc;color:#fff;font-family:Quicksand,"游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"Yu Gothic UI","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,sans-serif}#about_cover,#view{position:fixed;top:0;z-index:1}#bt_back,#bt_fs{position:absolute;z-index:100;padding:10px;left:0;font-size:1rem;cursor:pointer;transition:.2s ease}#bt_fs{left:auto;right:0}#scene_main,#scene_top{width:90%}#scene_loading{width:100%}#about,#scene_loading,#scene_main,#scene_top{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:100;display:none}#scene_top h1{font-size:1.5rem;margin-bottom:25px}#bt_start{margin-bottom:15px}#scene_top .attention{font-size:.9rem;margin-top:25px}#scene_top .tit{margin-top:20px;margin-bottom:10px}#scene_top .con{letter-spacing:-.5rem}#scene_top .sns{margin:0 8px;cursor:pointer}#scene_top .sns img{width:40px}#ng .atten{font-size:.9rem;margin-bottom:20px}#scene_loading hr{width:"0%"}#scene_main,#scene_main .attention{pointer-events:none}#bt_backtrack,#bt_feedback{font-size:.9rem;margin-top:20px;pointer-events:auto}#about_cover{z-index:900;background:#fff;opacity:.5}#about{z-index:1000;color:#fff;background:#8cc;max-width:640px;letter-spacing:.2rem;line-height:1.2;width:100%}#about_in{padding:40px}#bt_close{font-size:2rem;cursor:pointer}#about .close{margin-bottom:30px}#about .con{line-height:1.7;margin-bottom:20px}#about .link{margin-top:30px;margin-bottom:10px;line-height:1.5}#bt_back:hover,#bt_backtrack:hover,#bt_close:hover,#bt_feedback:hover,#bt_fs:hover,#scene_top .sns:hover,a:hover{animation:animover .2s linear;-webkit-animation:animover .2s linear}@keyframes animover{0.00%{opacity:0}100%{opacity:1}}@-webkit-keyframes animover{0.00%{opacity:0}100%{opacity:1}}@media (max-width:640px){#scene_top h1{font-size:1.2rem;margin-bottom:18px}#bt_start,#scene_top .tit{margin-bottom:10px}#bt_about a,#bt_start a{font-size:.9rem}#scene_top .attention{font-size:.6rem;margin-top:18px}#scene_top .tit{font-size:.9rem;margin-top:20px}#scene_top .con{letter-spacing:-.5rem}#scene_top .sns{margin:0 8px}#scene_top .sns img{width:30px}#ng .atten{font-size:.6rem;margin-bottom:15px}#bt_backtrack,#bt_feedback{font-size:.7rem}#about_in{padding:30px}#bt_close{font-size:1.8rem;cursor:pointer}#about{letter-spacing:.1rem}#about a{color:#fff;text-decoration:none;border-bottom:dashed 1px #fff}#about .con,#about .link{font-size:.9rem}} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@ |
||||
@charset "utf-8";/*! |
||||
YUI 3.18.1 (build f7e7bcb) |
||||
Copyright 2014 Yahoo! Inc. All rights reserved. |
||||
Licensed under the BSD License. |
||||
http://yuilibrary.com/license/ |
||||
*/a:link,a:visited,body,html,legend{color:#000}#black,#black a:link,#black a:visited{color:#fff}#black a:link,#black a:visited,a:active,a:hover,a:link,a:visited{text-decoration:underline;outline:0}html{background:#FFF}blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}#yui3-css-stamp.cssreset{display:none}.default,body,html{font-family:"游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"Yu Gothic UI","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,sans-serif;letter-spacing:.2rem;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;background:#fff}a,body,html{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}a:active,a:hover{color:#969696}#black{margin:0;background:#000}.noselect{-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.noanti{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}#flash_audio{position:absolute;pointer-events:none} |
||||
@ -0,0 +1,59 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="zh"> |
||||
|
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> |
||||
<meta name="description" content="初音未来版本的通过点击/触摸播放声音并出现变化图案的互动内容。"> |
||||
<title>Mikutap</title> |
||||
<link rel="icon" type="image/x-icon" href="https://cdn.yimian.xyz/mikutap/favicon.png"> |
||||
<link rel="apple-touch-icon" href="https://cdn.yimian.xyz/mikutap/icon.png"> |
||||
<link href="https://fonts.loli.net/css.css" rel="stylesheet"> |
||||
<link charset="UTF-8" href="https://cdn.yimian.xyz/mikutap/shared/sp/css/common.css" rel="stylesheet"> |
||||
<link charset="utf-8" href="https://cdn.yimian.xyz/mikutap/css/mikutap.css" rel="stylesheet"> |
||||
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script> |
||||
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/pixi.js/3.0.11/pixi.min.js" type="text/javascript"></script> |
||||
<script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/gsap/1.19.1/TweenMax.min.js" type="text/javascript"></script> |
||||
<script charset="UTF-8" src="https://cdn.yimian.xyz/mikutap/shared/js/common-2.min.js" type="text/javascript"></script> |
||||
<script charset="utf-8" src="https://cdn.yimian.xyz/mikutap/js/mikutap.min.js" type="text/javascript"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="view"></div> |
||||
<div id="scene_top"> |
||||
<h1>Mikutap</h1> |
||||
<div id="ng"> |
||||
<p class="atten">十分抱歉<br>您的浏览器并不支持本页面需要的特性</p> |
||||
</div> |
||||
<div class="ok"> |
||||
<p id="bt_start"><a href="mikutap.html">!开始!</a></p> |
||||
</div> |
||||
<p id="bt_about"><a href="mikutap.html">*关于*</a></p> |
||||
<div class="ok"> |
||||
<p class="attention">※请打开声音并享受。</p> |
||||
</div> |
||||
</div> |
||||
<div id="scene_loading"> |
||||
<hr size="1" color="#fff"> </div> |
||||
<div id="scene_main"> |
||||
<div class="set"> |
||||
<p class="attention">点击 & 拖动或者按任意键!</p> |
||||
<p id="bt_backtrack"><a href="mikutap.html">背景音乐: 开启</a></p> |
||||
</div> |
||||
</div> |
||||
<div id="about_cover"></div> |
||||
<div id="about"> |
||||
<div id="about_in"> |
||||
<p class="close"><span id="bt_close">×</span></p> |
||||
<p class="con"> 声音来源 <a href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x" target="_blank">Hatsune Miku</a> </p> |
||||
<p class="con"> 作者 <a href="https://aidn.jp" target="_blank">daniwell</a> (<a href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a>) </p> |
||||
<p class="link"> 灵感来源 <a href="http://patatap.com/" target="_blank">Patatap</a><br>(令人赞叹的网页!)</p> |
||||
</div> |
||||
</div> |
||||
<div id="bt_back">＜返回</div> |
||||
<div id="bt_fs">□全屏显示</div> |
||||
</body> |
||||
|
||||
</html> |
||||
Loading…
Reference in new issue