html5祝祖国母亲70周年生日快乐源码

2019年9月30日23:28:48 评论 50

国庆盛临之际,为庆祝祖国母亲生日快乐,许莔写了个单页的祝福html页面类似于专题页。

效果

html5祝祖国母亲70周年生日快乐源码

  • 显示国庆logo
  • 拥有烟花发射绽放的特效
  • 采用整页为音频控件按钮
  • 采用html+css+js架构
  • 全局采用cdn加速 仅保留index.html
  • 兼容pc端以及移动端
实在没啥好介绍的看中就带走就好[受虐滑稽] 

代码

展开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="许莔宛丽新中国成立70周年国庆专题">
<title>热烈庆祝新中国成立70周年-许莔宛丽</title>
<link rel="shortcut icon" href="https://www.xm5l.org/favicon.ico"/>
<link rel="stylesheet" rel="external nofollow" target="_blank" href="https://www.xm5l.org/wp-content/themes/begin/go.php?url=aHR0cHM6Ly9jZG4uNWx5dW4uY24vYmxvZ19maWxlL3BhZ2UvcWluZ2d1b3FpL3dhcC9jc3Mvc3R5bGUuY3Nz"/>
<!--许莔宛丽原创首发转载请保留原链接-->
</head>
<body onclick="playPause()">
<!--许莔宛丽原创首发转载请保留原链接-->
<!--background-->
<img src="https://cdn.5lyun.cn/blog_file/page/qingguoqi/wap/images/wap_bg.jpg" class="back" id="Background" />
<!--content-->
<div class="like">
<img src="https://cdn.5lyun.cn/blog_file/page/qingguoqi/wap/images/2.png" id="logo">
<h3>热烈庆祝新中国成立70周年</h3><br/><br/>
<h5 style="color:#06F;">祝福我们亲爱而伟大的母亲70岁生日快乐!祝全球亿万中国同胞国庆快乐!</h5>
</div>
	<!--End of content-->
	<!--进入主站-->
	<div class="site">
		<p><a href="https://www.xm5l.org/sj.html" target="">进入主站</a></p>
    </div>
		<!--进入主站结束-->
    
<!-- music -->
<audio autoplay="autoplay" id="music">
<source src="https://cdn.5lyun.cn/blog_file/page/qingguoqi/wap/music/%E4%B8%AD%E5%A4%AE%E4%B9%90%E5%9B%A2%E5%90%88%E5%94%B1%E9%98%9F%20-%20%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%9B%BD%E6%AD%8C.ogg" type="audio/ogg">
<source src="https://cdn.5lyun.cn/blog_file/page/qingguoqi/wap/music/%E4%B8%AD%E5%A4%AE%E4%B9%90%E5%9B%A2%E5%90%88%E5%94%B1%E9%98%9F%20-%20%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%9B%BD%E6%AD%8C.mp3" type="audio/mpeg">
<source src="https://cdn.5lyun.cn/blog_file/page/qingguoqi/wap/music/%E4%B8%AD%E5%A4%AE%E4%B9%90%E5%9B%A2%E5%90%88%E5%94%B1%E9%98%9F%20-%20%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%9B%BD%E6%AD%8C.mp3中央乐团合唱队-中华人民共和国国歌.mp3" type="audio/mpeg">
您的浏览器不支持html5的audio标签!大姥换个浏览器吧!
</audio>  
<!-- music end -->
<!--javascrit-->
<script type="text/javascript" src="https://cdn.5lyun.cn/blog_file/page/qingguoqi/wap/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdn.5lyun.cn/blog_file/page/qingguoqi/wap/js/jquery.fireworks.js"></script>
<script type="text/javascript">
	$('.like').fireworks({ 
	  sound: false, 
	  opacity: 0.3, 
	  width: '100%', 
	  height: '100%' 
	});
	
	var myAudio = document.getElementById('music');
    function playPause(){
        if(myAudio.paused){
            myAudio.play();
        }else{
            myAudio.pause();
        }
    }
	</script>
<!--许莔宛丽原创首发转载请保留原链接-->
<!-- end -->
</body>
</html>


就这么样了,下篇文章再见,下面有打包下载

 

下载信息 html5祝祖国母亲70周年生日快乐源码 2KB
下载地址

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: