HTML生日祝福视频背景+视频祝福

weixin_44012124

已于 2023-07-11 19:17:00 修改

阅读量364

点赞数

文章标签： html css css3

于 2022-12-01 13:18:42 首次发布

本文链接：https://blog.csdn.net/weixin_44012124/article/details/128130343

版权

打开是这样的（没有大黄脸），背景放一个MP4视频，中间放一张照片。
在这里插入图片描述
输入生日，点测一下对不对，如果对，弹出祝福视频。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="icon" href="a.ico" type="image/x-icon"/> // 自己找个ico放进去
		<style type="text/css">
			table{border-collapse:collapse;}
			* {
            	   margin: 0;
            	   padding: 0;
      			}
	
			#txt{
					resize:none;
					width:450px;
					height:40px;
					font-size:10px;
					font-color:red;
					z-index:90;
 					position: relative;
				 }
				
			a{
					border:1px solid;
					text-decoration:none;
					font-family:微软雅黑；
					font-size:20px;
					font-color:red;
 					z-index:90;
 					position: relative;
				   }

			 .box {
            		  width: 100%;
          			  height: 700px;
           			  background-color: rgb(230, 134, 134);
          			  position: relative;
				      z-index:70;
      				 }

			video {
           				 width: 100%;
           				 position: absolute;
           				 top: 0;
            			 left: 0;
				         z-index:70;
       				 }			

			img{
					width:300px;
					height:500px;
					z-index:80;
					position: relative;
				}
				
			.img_1{text-align:center;}
			#btn{
					width:150px;
					height:45px;
					position: absolute;
					font-size:20px;
					z-index:80;
				}

		</style>
		
		<script>
			window.onload=function(){
				alert("请输入xxx的生日！\n如：01月01日"); //弹窗
				var oBtn=document.getElementById("btn");
				var oTxt=document.getElementById("txt");
				oTxt.focus();
				oBtn.onclick=function(){
					if (oTxt.value == "") {
						alert("请输入xxx的生日！")
						}
						if (oTxt.value == "12月03日"){ // 改生日
							alert("生日快乐！") //祝福语
							window.open(url="red.mp4",target="_blank") // 放祝福视频
							}
							if(oTxt.value != ""&&oTxt.value != "12月03日"){ //改生日
								alert("这不是xxx的生日！")
						}
					}
				}	
		</script>
	</head>
	<body>
		<div class="box">
       		 <!-- autoplay 自动播放  loop循环播放  muted 声音 preload 预加载 -->
      		 <div class="video"><video autoplay loop muted="false" preload>
            	<source src="bg.mp4"></video></div> // 背景循环视频
			<div class="img_1"><img  src="zgr.jpg"/></div> // 中间的图片
			<form>
			<div class="img_1">
	    		<input id="txt" type="text"/>
				<input id="btn" type="button" value="测一下对不对"/>
       		 </div>
			</form>
		</div>
	</body>
</html>