除夕最炫烟花代码

简介: 除夕最炫烟花代码

一、效果展示:烟花特效

二:代码

<!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>

三:文件获取

烟花源码,除夕最炫烟花代码-其他文档类资源-CSDN下载

目录
打赏
0
0
0
0
10
分享
相关文章
html+css+js实现的新年烟花
html+css+js实现的新年烟花
110 0
七夕表白,不给女朋友来场炫酷的烟花?
七夕表白,不给女朋友来场炫酷的烟花?
113 0
用three.js搞3个炫酷粒子出场
出场就要帅气!动画要酷!点进来就看粒子玩出新花样!让你拥有炫酷的粒子出场方式,一闪一闪亮晶晶好像许多的星星!!!
【兔年烟花】旖旎风景——浪漫烟花(Python实现)
【兔年烟花】旖旎风景——浪漫烟花(Python实现)
155 0
C/C++实现跨年表白烟花
C/C++实现跨年表白烟花
753 0
2023跨年代码(烟花+背景音乐)
2023跨年代码(烟花+背景音乐)
413 0
如何做一个俄罗斯方块7:下落处理
下落处理”也是俄罗斯方块游戏循环中的最后一个环节,因为“下落处理”结束后,就又进入到了下一个新的循环中。 与之前一样,我们先来看一下什么时候需要进行“下落处理”“下落处理”是在消除完成之后进行的,消除完成之后,上方的未被消除的方块会下落,直到碰到下方的其它方块或者是第一行为止。
226 0
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
639 0
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
uiu
烟花代码,予心上人最璀璨烟花—— 附源码与成品(HTML+CSS+JS)
烟花代码,予心上人最璀璨烟花—— 附源码与成品(HTML+CSS+JS)
uiu
3320 0
烟花代码,予心上人最璀璨烟花—— 附源码与成品(HTML+CSS+JS)