一、效果展示：烟花特效
二：代码
<!DOCTYPE html> <html lang="zh"> <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"> <title>烟花特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> </head> <style> #myclock{ background: #919191; color: red; text-align: center; width: 928px; height: 123px; font-size:74px; font-weight:bold; font-family:"microsoft yahei","微软雅黑",serif; } @-webkit-keyframes reverseRotataZ{ 0%{-webkit-transform: rotateZ(0deg);} 100%{-webkit-transform: rotateZ(-360deg);} } @-webkit-keyframes rotataZ{ 0%{-webkit-transform: rotateZ(0deg);} 100%{-webkit-transform: rotateZ(360deg);} } #musicControl { position:fixed;right:60px;top:145px;margin-top:0;display:inline-block;z-index:99999999;cursor: pointer} #musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('/yanhua/img/music.png') no-repeat;background-size:100%;} #musicControl a audio{width:100%;height:56px;} #musicControl a.stop { background-position:left bottom;} #musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;} #music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;} </style> <body onLoad="disptime( )"> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1><input id="myclock" type="text" value="" /></h1> <span id="musicControl"> <a id="mc_play" class="on" onclick="play_music();"> <audio id="musicfx" loop="loop" autoplay="autoplay"> <source src="/yanhua/music/mp3.flac" type="audio/mpeg"> </audio> </a> </span> </header> </div> <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"></script>')</script> <script type="text/javascript" src="js/jquery.fireworks.js"></script> <script type="text/javascript"> $('.htmleaf-container').fireworks({ sound: false, // sound effect opacity: 0.7, width: '100%', height: '90%' }); function disptime() { var time = new Date(); //現在の時間 var hour = time.getHours(); //時、分、秒 var minute = time.getMinutes(); var second = time.getSeconds(); var year = time.getFullYear(); var month = time.getMonth() var day = time.getDay() if (minute < 10) //分は1桁の場合、先頭に0を補足 minute = "0" + minute; if (second < 10) //秒は1桁の場合、先頭に0を補足 second = "0" + second; var time = year + "年" + month + "月" + day + "日" + " " + hour + ":" + minute + ":" + second; $("#myclock").attr("value", time); var myTime = setTimeout("disptime( )", 1000); //使用定时器函数，每隔1秒调用disptime( )函数刷新显示 } function play_music(){ if ($('#mc_play').hasClass('on')){ $('#mc_play audio').get(0).pause(); $('#mc_play').attr('class','stop'); }else{ $('#mc_play audio').get(0).play(); $('#mc_play').attr('class','on'); } $('#music_play_filter').hide(); event.stopPropagation(); //阻止冒泡 } function just_play(id){ $('#mc_play audio').get(0).play(); $('#mc_play').attr('class','on'); if (typeof(id)!='undefined'){ $('#music_play_filter').hide(); } event.stopPropagation(); //阻止冒泡 } var play_filter=document.getElementById('music_play_filter'); play_filter.addEventListener('click', function(){ just_play(1); }); play_filter.addEventListener('touchstart', function(){ just_play(1); }); play_filter.addEventListener('touchend', function(){ just_play(1); }); play_filter.addEventListener('touchmove', function(){ just_play(1); }); play_filter.addEventListener('mousedown', function(){ just_play(1); }); play_filter.addEventListener('mouseup', function(){ just_play(1); }); play_filter.addEventListener('mousemove',function(){ just_play(1); }); </script> </body> </html>
三：文件获取
