博客

一年一次的高考是人生的第一个重要转折点，如果能重来一起进入时光机，高考前一天小编随便做了一个测一测命中注定大学的小小游戏。（vue前端小游戏，canvas动画）

效果图

源代码

1、html代码

<template> 
    <div class="eatbody" style="min-height:100vh"> 
    <canvas id="fireworks" ></canvas> 
      
     <div id="wrapper" style="position: absolute;z-index: 9;"> 
        
        <img id="jbtm" src="@/static/tool/icon_jbtm.png" /> 
         <h1> 
            &nbsp; 
            <b style="color:#ff9900" id="what"></b> 
             
             
        </h1> 
        <input type="button" style="z-index:999" value="测一测" id="start"> 
        <input type="button" value="测一测" id="stop" style="display: none;"> 
        <br> 
        <br> 
        <span id="zfgl" style="width: 120px;height: 40px;vertical-align: middle cursor: pointer; color:#0097ff;">&nbsp;</span> 
    </div> 
   <div class="wh_tfooter"> 
            本工具由 <a href="http://hereitis.cn" style="color:#ff9900;" target="_blank">hereitis.cn</a> 开发  | 公众号：在这里资源站 | 仅供舒压娱乐 
        </div> 
  <textarea rows="9" cols="53" id="list" style="display:none"> 
清华大学 北京大学 厦门大学 中国科学技术大学 南京大学  复旦大学 天津大学 哈尔滨工业大学 南开大学 西安交通大学 华中科技大学 东南大学 武汉大学 上海交通大学 中国海洋大学 山东大学 湖南大学 中国人民大学 北京理工大学 吉林大学 重庆大学 电子科技大学 大连理工大学 四川大学 中山大学 华南理工大学 北京航空航天大学 兰州大学 东北大学 西北工业大学 北京师范大学 同济大学 中南大学 中国农业大学 国防科技大学 西北农林科技大学 华东师范大学 中央民族大学 北京交通大学 北京工业大学 北京航空航天大学 北京科技大学 北京化工大学 北京邮电大学 中国农业大学 北京林业大学 中国传媒大学 中央民族大学 北京师范大学 中央音乐学院 对外经济贸易大学 北京中医药大学 北京外国语大学 中国石油大学 中国政法大学 中央财经大学 华北电力大学 北京体育大学 中国地质大学 高考是啥？直接保送清华北大 上海交通大学 华东师范大学 上海外国语大学 东华大学 上海财经大学 同济大学 华东理工大学 上海大学 天津大学 天津医科大学 西南大学 河北工业大学 太原理工大学 内蒙古大学 大连理工大学 东北大学 辽宁大学 大连海事大学 东北师范大学 延边大学 哈尔滨工业大学 海尔滨工程大学 东北农业大学 东北林业大学 南京大学 苏州大学 南京师范大学 中国矿业大学 中国医科大学 河海大学 南京航空航天大学 江南大学 南京农业大学 南京理工大学 浙江大学 中国科学技术大学 安徽大学 合肥工业大学 福州大学 南昌大学 中国石油大学 郑州大学 华中科技大学 中国地质大学 武汉理工大学 华中师范大学 华中农业大学 中南财经政法大学 中南大学 湖南师范大学 华南师范大学 暨南大学 华南理工大学 中山大学 广西大学 四川大学 西南交通大学 电子科技大学 四川农业大学 西南财经大学 云南大学 贵州大学 西北大学 西北交通大学 西北工业大学 西安电子科技大学 长安大学 西北农林科技大学 陕西师范大学 兰州大学 新疆大学 石河子大学 第二军医大学 第四军医大学 国防科技大学 青海大学 宁夏大学 海南大学 西藏大学 
    </textarea> 
 
</div> 
  
</template>

//css
<style>
body { 
    position: relative; 
    overflow: hidden !important; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    background: #051731; 
    font-family: "微软雅黑";     
} 
 .eatbody { 
    position: relative; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    background:#051731; 
    font-family: "微软雅黑"; 
} 
#wrapper { 
    position: absolute; 
    top: 35%; 
    left: 50%; 
    margin-top: -60px; 
    margin-left: -250px; 
    width: 500px; 
    height: 120px; 
    text-align: center; 
} 
 
#jbtm { 
    margin: 0 0 20px; 
    padding: 0; 
    height: 127px; 
    width: 380px; 
} 
 
#wrapper h1 { 
    margin: 0 0 20px; 
    padding: 0; 
    font-weight: 300; 
    font-size: 30px; 
} 
 
#wrapper h1 b{ 
    font-weight: 700; 
} 
 
#start { 
    width: 120px; 
    height: 40px; 
    vertical-align: middle; 
    font-family: "微软雅黑"; 
    cursor: pointer; 
    color: #00fff6; 
    font-size: 18px; 
    border: 1px solid #00fff6; 
    background: none; 
} 
 
#stop { 
    display:none; 
     width: 120px; 
    height: 40px; 
    vertical-align: middle; 
    font-family: "微软雅黑"; 
    cursor: pointer; 
    color: #00fff6; 
    font-size: 18px; 
} 
 



   
.wh_tfooter { 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    width:100%; 
    height: 18px; 
    font-size: 12px; 
    padding: 30px 0px; 
    color: #fff; 
    text-align: center; 
}
</style>

2、冒泡特效，canvas烟火特效查看方式：

关注公.众.号:《在这里资源站》   回复 “金榜题名” 获取全部源码

技术交QQ群：585671966