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

举报
web前端优质创作者 发表于 2022/08/14 11:47:55 2022/08/14
【摘要】 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。@TOC 一、网页介绍1 网页简介：基于 HTML+CSS+JavaScript 制作七...

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

@TOC

一、网页介绍

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;
    }
}

三、精彩专栏

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

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML JavaScript 开发者
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入