HTML5怎么实现七夕情人节表白效果

开发技术 作者:iii 2024-04-17 05:35:01
这篇文章主要介绍了HTML5怎么实现七夕情人节表白效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5怎么实现七夕情人节表...

这篇文章主要介绍了HTML5怎么实现七夕情人节表白效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5怎么实现七夕情人节表白效果文章都会有所收获,下面我们一起来看看吧。

HTML结构代码

<!--
 * @Author: your name
 * @Date: 2021-06-11 11:16:48
 * @LastEditTime: 2021-08-06 14:30:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \\06\\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <link type="text/css" rel="stylesheet" href="static/css/style1.css" />
    <link type="text/css" rel="stylesheet" href="static/css/animate.min.css" />
    <link
      type="text/css"
      rel="stylesheet"
      href="static/css/audioAutoPlay.css"
    />
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/three.js"></script>
    <script src="static/js/tween.min.js"></script>
    <script src="static/js/trackballcontrols.js"></script>
    <script src="static/js/css3drenderer.js"></script>
    <title>七夕告白网页</title>
  </head>

  <body>
        <!-- 背景S -->
        <!-- <audio controls autoplay>
          <source src="mp3/520.mp3">
      </audio> -->
      <div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;">
          <div id="background" class="wall"></div>
          <div id="midground" class="wall"></div>
          <div id="foreground" class="wall"></div>
          <div id="top" class="wall"></div>
      </div>
      <!-- 背景E -->
      <!-- 音乐 -->
    <img
      id="music_ico"
      onclick="clickMusic()"
      src="static/image/music_ico.png"
      alt=""
    />
    <audio
      id="audio"
      style="display:"
      src="mp3/bg_music.mp3"
      preload="auto"
      loop="loop"
    ></audio>
    <div id="container"></div>
    <!-- 操作按钮-默认已经隐藏- 需要打开可以 查找#menu 类名 删掉  opacity: 0;即可-->
    <div id="menu">
      <button id="table">照片墙</button>
      <button id="sphere">照片球</button>
      <button id="helix">螺旋照片</button>
      <button id="grid">整齐排列</button>
    </div>
    <!-- 卡片 -->
    <div class="show_info animated" style="display:">
      <div class="info_my">
        <img
          id="showImg"
          style="width: 50px; height:"
          src="./static/image/2.jpg"
        />
        <div class="info_mem">
          <div class="nickname"></div>
          <div class="id">七夕节是一个十分浪漫的节日,相传牛郎织女每年农历七月七日会在鹊桥上相会</div>
          <div class="vote">520</div>
        </div>
      </div>
      <div class="intro">风筝有风,海豚有海,你还有我 ????</div>
    </div>
  </body>
  <script type="text/javascript" src="static/js/functions.js"></script>
  <script type="text/javascript" src="static/js/audioAutoPlay.js"></script>
</html>

CSS样式代码

#music_ico {
    position: absolute;
    top: 10px;
    right: 10px;
    float: right;
    cursor: pointer;
    z-index: 999;
}

.music_run {
    animation: myrun 5s linear infinite;
    -webkit-animation: myrun 5s linear infinite;
    /*Safari and Chrome*/
}

@keyframes {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* Internet Explorer */
        -moz-transform: rotate(0deg);
        /* Firefox */
        -webkit-transform: rotate(0deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(0deg);
        /* Opera */
    }
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* Internet Explorer */
        -moz-transform: rotate(360deg);
        /* Firefox */
        -webkit-transform: rotate(360deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(360deg);
        /* Opera */
    }
}

@-webkit-keyframes myrun
/*Safari and Chrome*/

    {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* Internet Explorer */
        -moz-transform: rotate(0deg);
        /* Firefox */
        -webkit-transform: rotate(0deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(0deg);
        /* Opera */
    }
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* Internet Explorer */
        -moz-transform: rotate(360deg);
        /* Firefox */
        -webkit-transform: rotate(360deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(360deg);
        /* Opera */
    }
}

关于“HTML5怎么实现七夕情人节表白效果”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“HTML5怎么实现七夕情人节表白效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注捷杰建站行业资讯频道。

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_12757.html
html5