除夕最炫烟花代码

最新推荐文章于 2024-01-30 00:03:07 发布

bp粉

最新推荐文章于 2024-01-30 00:03:07 发布

阅读量243

点赞数

分类专栏：前端 html 文章标签： css3 html css

本文链接：https://blog.csdn.net/m0_67392182/article/details/123399192

版权

HTML CSS3 JavaScript 动画特效音乐播放

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

html

22 篇文章 0 订阅

订阅专栏

一、效果展示：烟花特效

二：代码

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

bp粉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
除夕最炫烟花代码

一、效果展示：烟花特效二：代码<!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.
复制链接

扫一扫

专栏目录