HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页 简单的3D相册制作

发布时间：2024年01月06日

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

? 【作者主页——🔥获取更多优质源码】

? 【学习资料/简历模板/面试资料/ 网站设计与制作】

? 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!--
 * @Author: your name
 * @Date: 2020-12-30 10:24:14
 * @LastEditTime: 2020-12-30 10:28:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \正方体旋转动画\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <!--下雪动画-->
    <script src="js/jquery.min.js"></script>
    <script src="js/snow.js"></script>

    <link type="text/css" href="css/style.css" rel="stylesheet" />
  </head>

  <body>
    <div class="snow-container">
      <div class="ziti">
        <span> ?各位新年快乐呀！！ </span>
      </div>

      <div class="dongtai">
        <ul>
          <li>
            <img src="image/1.png" alt="" />
          </li>
          <li>
            <img src="image/2.png" alt="" />
          </li>
          <li>
            <img src="image/3.png" alt="" />
          </li>
          <li>
            <img src="image/4.png" alt="" />
          </li>
          <li>
            <img src="image/5.png" alt="" />
          </li>
          <li>
            <img src="image/6.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

2.CSS代码


@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    background-image: url("../image/timg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dongtai {
    width: 200px;
    height: 200px;
    margin-top: 20%;
    margin-left: calc( 50% - 100px);
    position: absolute;
}

ul,
li {
    margin: 0;
    padding: 0;
}

ul {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform-origin: 100px 100px -100px;
    /* 设置ul旋转的中心点在正方体中心 */
    background-color: #fff;
    list-style: none;
    position: absolute;
    animation: ani 10s infinite alternate;
    transform: rotateX(0deg) rotateY(0deg);
}

li {
    /* 装换为行内元素 */
    font-size: 60px;
    text-align: center;
    display: inline-block;
    width: 200px;
    height: 200px;
    position: absolute;
    border: 1px solid rgb(175, 209, 211);
    /* 让浏览器解析盒子的时候 宽认为是border和padding的和 */
    box-sizing: border-box;
}

.dongtai ul li img {
    height: 100%;
    width: 100%;
}

li:nth-of-type(1) {
    background-size: cover;
    left: 0;
    top: 0;
}

li:nth-of-type(2) {
    background-size: cover;
    left: -200px;
    top: 0;
    transform-origin: right;
    animation: boo2 10s infinite alternate;
}

li:nth-of-type(3) {
    background-size: cover;
    left: 0;
    top: 0;
    animation: boo3 10s infinite alternate;
}

li:nth-of-type(4) {
    background-size: cover;
    left: 200px;
    top: 0;
    transform-origin: left;
    animation: boo4 10s infinite alternate;
}

li:nth-of-type(5) {
    background-size: cover;
    left: 0;
    top: -200px;
    transform-origin: bottom;
    animation: boo5 10s infinite alternate;
}

li:nth-of-type(6) {
    background-size: cover;
    left: 0;
    top: 200px;
    transform-origin: top;
    animation: boo6 10s infinite alternate;
}

@keyframes boo2 {
    0% {
        transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(-45deg);
    }
    30% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(-90deg);
    }
}

@keyframes boo3 {
    0% {
        transform: translateZ(-10px) rotateY(0deg);
    }
    20% {
        transform: translateZ(-100px) rotateY(-90deg);
    }
    30% {
        transform: translateZ(-200px) rotateY(-180deg);
    }
    100% {
        transform: translateZ(-200px) rotateY(-180deg);
    }
}

@keyframes boo4 {
    0% {
        transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(45deg);
    }
    30% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(90deg);
    }
}

@keyframes boo5 {
    0% {
        transform: rotateX(0deg);
    }
    20% {
        transform: rotateX(45deg);
    }
    30% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(90deg);
    }
}

@keyframes boo6 {
    0% {
        transform: rotateX(0deg);
    }
    20% {
        transform: rotateX(-45deg);
    }
    30% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}

@keyframes ani {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    20% {
        transform: rotateX(-45deg) rotateY(-45deg);
    }
    30% {
        transform: rotateX(-45deg) rotateY(-135deg);
    }
    40% {
        transform: rotateX(-45deg) rotateY(-215deg);
    }
    50% {
        transform: rotateX(-45deg) rotateY(-305deg);
    }
    60% {
        transform: rotateX(-45deg) rotateY(-395deg);
    }
    70% {
        transform: rotateX(-135deg) rotateY(-395deg);
    }
    80% {
        transform: rotateX(-225deg) rotateY(-395deg);
    }
    90% {
        transform: rotateX(-315deg) rotateY(-395deg);
    }
    100% {
        transform: rotateX(-405deg) rotateY(-395deg);
    }
}

.ziti {
    text-align: center;
    font-size: 60px;
    position: absolute;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: calc( 50% - 240px);
}

span {
    font-family: "微软雅黑";
    line-height: 50px;
    /*关键代码*/
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, rgb(196, 30, 30) 50%, rgb(41, 197, 111) 75%, rgb(175, 23, 221));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
}

/*关键代码*/

@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

三、精彩专栏

看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。—— `

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

文章来源:https://blog.csdn.net/m1_46321522/article/details/134915125
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章