演示效果
演示地址
https://wanghao221.github.io/game/Lion-Game.html
截图
代码展示
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Wanghao | Chill The Lion</title> <link rel="icon" type="image/x-icon" href="../favicon.ico"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="google-site-verification" content="i3bVXD3ywVilJt3b0Denbr2n41les3p8ciIldduw4X0" /> <div id="world"></div> <div id="instructions">按住并拖动以产生风<br/><span class="lightInstructions">小狮子一定会很舒服</span></div> <div id="credits"> <div class="made-with-love"> Made with <i>♥</i> by <a target="_blank" href="https://blog.csdn.net/qq_44273429/">海拥CSDN博客</a> </div> <p>Copyright © <a href="https://wanghao221.github.io/">Wang Hao</a></p> </div> </head> <body> </body> </html>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800); #world { background: #ebe5e7; position:absolute; width:100%; height:100%; overflow:hidden; } #instructions{ position:absolute; width:100%; top:50%; margin: auto; margin-top:120px; font-family:'Open Sans', sans-serif; color:#653f4c; font-size:.9em; text-transform: uppercase; text-align : center; user-select: none; } .lightInstructions { color:#993f4c; font-size:.8em; } #credits{ position:absolute; width:100%; margin: auto; bottom:0; margin-bottom:20px; font-family:'Open Sans', sans-serif; color:#b297a2; font-size:0.7em; text-transform: uppercase; text-align : center; } #credits a { color:#b297a2; } #credits .society6 { color:#993f4c; }
源码获取
1.CSDN积分下载地址：
https://download.csdn.net/download/qq_44273429/15210035
