用jquery做的（七夕520）+背景音乐

最新推荐文章于 2022-09-25 12:56:55 发布
最新推荐文章于 2022-09-25 12:56:55 发布
阅读量605 收藏 3
点赞数 3
文章标签： 用jquery做的七夕520+背景音乐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leiyanhongfhc/article/details/77543443
版权
这是一个使用jQuery编写的HTML页面，展示了七夕节快乐的文字动画，结合背景音乐，营造浪漫氛围。页面中，'七夕快乐'四个字逐个显现，下方是一段寓意深长的诗句，同时背景随机播放爱心动画，增强了互动体验。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>七夕520+背景音乐</title>
<!-- <link rel="stylesheet" type="text/css" href="css/home.css"> -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/home.js"></script> -->
    <style type="text/css">
          body {
    margin:0;
    padding:0px;
    background-color:#2C3437;
}
.p1 {
    font-size: 60px;
    font-weight: bold;
     color: red;
     text-align: center;
}
.p2 {
    font-size: 40px;
    color: pink;
    font-weight: bold;
    text-align: center;
}
.maximum {
    width: 1100px; 
    margin: auto;
}
.content {
    display:inline-block;
    width:350px;
    height:400px;
    padding-top:70px;
    margin-right:5px;
    margin-left:5px;
}
.header {
    margin-left:20px;
}
.header-f1 {
    margin-left:242px;
}


div>div>div {
    display:block;
    height:20px;
}
div>div>div>div {
    width:16px;
    height:16px;
    background-color:#ff00d8;
    display:inline-block;
    float:left;
    margin:2px;
}
div>div.content1>div>div.fl {
    background-color:#ee30a7;
}
div>div.content2>div>div.fl {
    background-color:#adff2f;
}
div>div.content3>div>div.fl {
    background-color:#ab82ff;
}
.header-0 {
    margin-left: 182px;
}




    </style>
</head>
<body>
<p class="p1">
        <span>七</span>
        <span>夕</span>
        <span>快</span>
        <span>乐</span>
    </p>
    <p class="p2">
        <span>雨</span>
        <span>滴</span>
        <span>会</span>
        <span>变</span>
        <span>成</span>
        <span>咖</span>
        <span>啡</span>
        <span>，</span>
        <span>种</span>
        <span>子</span>
        <span>会</span>
        <span>开</span>
        <span>出</span>
        <span>玫</span>
        <span>瑰</span>
        <span>，</span>
        <span>旅</span>
        <span>行</span>
        <span>是</span>
        <span>一</span>
        <span>种</span>
        <span>约</span>
        <span>会</span>
        <span>，</span>
        <span>不</span>
        <span>是</span>
        <span>没</span>
        <span>人</span>
        <span>陪</span>
        <span>，</span>
        <span>只</span>
        <span>怪</span>
        <span>咖</span>
        <span>啡</span>
        <span>喝</span>
        <span>不</span>
        <span>醉</span>
        <span>，</span>
        <span>雨</span>
        <span>一</span>
        <span>碰</span>
        <span>就</span>
        <span>碎</span>
        <span>，</span>
        <span>只</span>
        <span>有</span>
        <span>你</span>
        <span>依</span>
        <span>然</span>
        <span>完</span>
        <span>美</span>
        <span>。</span>
    </p>
<div class="maximum">
<div class="content content1">
   <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
           <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
             <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
             <div class="fl"></div>
        </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
             <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
             <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
             <div class="fl"></div>
        </div>
     


       <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
       <div class="header">
             <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>


          </div>
           <div class="header">
               <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
           <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
         <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
   </div>
    <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div> 
   </div>
   <div class="header">
              <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
   </div>
    <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
</div>
<!-- 2字 -->
<div class="content content2">
    <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
<div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
             <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
           <div class="header">
               <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
           <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
         <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
         <div class="header">
            <div class="fl header-f1" ></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>


        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>  
   <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
          </div>
        
       <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        </div>
        <!-- 0字 -->
      <div class="content content3">
   <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
         <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
          <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
        </div>
          <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
        </div>
        <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
          <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
        </div>
       <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
          <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
        </div>
          <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
        </div>
        <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
          <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
        </div>
      <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
           <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
          </div>
          <div class="header">
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl"></div>
             <div class="fl header-0"></div>
             <div class="fl"></div>
             <div class="fl"></div>
        </div>
          <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>


        </div>
         <div class="header">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
     
</div>
<audio id="music" autoplay="autoplay" loop="loop" preload="auto" src="http://www.xyptz.cn/aini.mp3"></audio>


<script type="text/javascript">
    
    $(function() {
    animate();//方法
});
function animate() {//运用方法
    $('div>div>div>div').each(function() {
        $(this).css({
            position: 'relative',
            top: '-400px',
            opacity: 0//用来控制透明度
        });
        var wait = Math.floor((Math.random() * 3000) + 1);
        $(this).delay(wait).animate({//delay用来延迟动画效果
            top: '0px',
            opacity: 1
        }, 2000, function() {
            $(this).delay(wait).animate({
                top: '50px',
                opacity: 0
            }, 1000, function() {
                $(this).delay(wait).animate({
                    top: '0px',
                    opacity: 1
                }, 500);




            });
        });
    });
 
    $('span').each(function() {
        $(this).css({
            position: 'relative',
            top: '-400px',
            opacity: 0//用来控制透明度
        });
        var wait = Math.floor((Math.random() * 3000) + 1);
        $(this).delay(wait).animate({//delay用来延迟动画效果
            top: '0px',
            opacity: 1
        }, 2000, function() {
            $(this).delay(wait).animate({
                top: '50px',
                opacity: 0
            }, 1000, function() {
                $(this).delay(wait).animate({
                    top: '0px',
                    opacity: 1
                }, 500);




            });
        });
    });
   }


</script>
</body>
</html>
leiyanhongfhc
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现背景音乐的jquery代码需要引入的文件
09-08
网站中需要添加背景音乐时，使用jquery实现需要引入的文件
jquery控制背景音乐开关与自动播放提示音的方法
12-10
本文实例讲述了jquery控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下： 很多人初学网页制作时在网页中加入一段背景音乐，听到音乐响起的那一刻往往都会有一丝的成就感。 这里就为大家讲解如何使用js控制背景音乐播放与停止。具体如下： 一、jquery控制背景音乐开关 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”  “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lan
HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 1万+
❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)❉ 效果演示❉ 代码文件目录一、文字修改(代码实现)
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6739
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
实现背景音乐的jquery代码
一路走一路看，一边哭一边笑
09-08 4017
如果网站需要加入背景音乐，可以参照下面的代码进行修改，注意代码中需要引入的文件：
圣诞节 html+css3+js 雪花飘落3D相册(含背景音乐) 程序员表白必备
12-22
圣诞节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！ 演示地址:...
表白网页7 情人节七夕节520程序员表白源码
05-11
【表白网页7 情人节七夕节520程序员表白源码】是一个专为程序员设计的浪漫表达工具，适合在情人节、七夕节或520等特殊日子使用。这个源码提供了构建独特表白网页的技术基础，帮助技术爱好者通过编程语言来传达情感。...
HTML5七夕情人节表白代码.zip
最新发布
11-02
通过结合这些技术，开发者可以创建一个互动性强、视觉效果丰富的表白网页，包括动态的爱心、闪烁的文字、背景音乐，甚至可能还有个性化的时间戳或地理位置信息。用户只需在浏览器中打开这个网页，就可以向心爱的人...
七夕表白网页源代码合集
09-19
- 动听的音乐：可以利用HTML5的`<audio>`标签添加背景音乐，或者使用JavaScript控制音频播放。 3. **源代码分析** - 查看HTML文件：了解网页的整体结构和元素布局，找出用于表白信息展示的部分。 - 研究CSS文件...
七夕表白8个网页源代码合集.zip
08-07
考虑到七夕的浪漫主题，网页可能还集成了一些API，比如天气API来显示当天的星空情况，或者音乐播放API来播放浪漫的背景音乐。 总的来说，这个合集不仅是一份源代码的集合，更是HTML、CSS和JavaScript技术在浪漫场景...
jquery实现的网页自动播放声音
10-26
主要介绍了使用jquery如何实现的网页自动播放声音,需要的朋友可以参考下
html5旋转音乐图标，控制背景音乐jquery.rotate
05-31
仿照易企秀制作html5背景音乐控制按钮，可以暂停，开始h5中的背景音乐
Html网页(js+css)实现情人节表白神器三套.rar
05-20
Html网页(js+css)实现情人节表白神器三套 Love：程序猿的方式~【情人节&520;—我爱你】~动画加音效 → 那些年最浪漫的表白(帮你得到你的她) https://yunyaniu.blog.csdn.net/article/details/79430987
唯美Html5+Jquery爱心表白源码，带有背景音乐，动态效果
02-26
昨日亲测可用，资源分不多，请大家作为模板使用，稍加修饰即可
HTML5+jQuery制作温馨浪漫爱心表白动画特效
热门推荐
云淡风轻、仅此一抹
02-14 5万+
HTML5+jQuery制作温馨浪漫爱心表白动画特效 代码下载地址：http://www.zuidaima.com/share/1695882735602688.htm
jquery 音乐添加
小九的博客
12-17 2507
html> html lang="en"> head> meta charset="UTF-8"> title>title> head> script src="jquery-1.3.2.min.js">script> body> div id="bg_music_btn" state='1' style="background-color: black;height: 10
jquery,js-按钮控制音乐播放
关注网络安全、云原生安全
10-19 1万+
实现点击按钮控制音乐的播放和暂停。默认为播放，若想默认不播放，修改audio的autoplay属性即可。 音乐,jquery.js及按钮的背景图片均为网上链接，你也可以下载到本地。 代码：       按钮控制播放音乐            .pause {background-position: 0 bottom;}     .mscBtn {height:
jQuery+html 实现背景音乐随机播放 (framework7)
weixin_45844542的博客
08-03 927
jQuery+html 实现背景音乐随机播放 <div> <img onclick="playMusic(this)" src="路径/music.png" height="120px" width="120px" /> <audio id="audio" src=""></audio> </div> 在页面刚进入的时候拿到音频数据 { path: '/msMain/', url: './mSpages/msMain.ht
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值