前言

今天教大家如何使用JS打造一个独特贺卡，先来给大家看看效果：

html代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="book p3d">

    <div class="book-cover p3d">
      <div class="page back flip"></div>
      <div class="page front p3d">
        <div class="shadow"></div>
        <div class="pic"></div>
      </div>
    </div>

    <div class="front-cover p3d">
      <div class="page front flip p3d">
        <p>
          亲爱的丁社长和铁锤：

          恭喜你们迎来人生新的旅程，结婚是爱情的圆满，是幸福的开始。愿你们携手共度人生的每一刻，相互扶持，相互理解，相互包容。

          在这个特别的日子里，愿你们的爱情如同新婚的阳光一样灿烂，如同甜蜜的蜜蜂一样温暖。愿你们的爱情，如同永恒的星辰，照耀着彼此的人生。

          愿你们的婚姻充满欢笑与快乐，百年好合，幸福美满！

          祝福语：
          丁社长和铁锤，祝你们于2024年5月1日结婚纪念日快乐！

          祝福你们永结同心，白头偕老！
        </p>
      </div>

      <div class="page back"></div>
    </div>

  </div>


</body>
</html>

<!DOCTYPE html>: 声明文档类型为 HTML5。
<html lang="en">: HTML 根元素，指定了页面的语言为英语。
<head>: 头部区域，包含了一些元信息，比如字符集和视口设置。
<meta charset="UTF-8">: 设置文档使用的字符编码为 UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口的宽度等于设备的宽度，并且初始缩放为 1.0。
<title>Document</title>: 设置页面标题。
<link rel="stylesheet" href="./style.css">: 引入外部样式表 style.css。
<body>: 主体内容区域开始。
<div class="book p3d">: 代表整个贺卡，具有立体效果（3D）。
<div class="book-cover p3d">: 贺卡的封面部分。
<div class="page back flip"></div>: 封面的背面页面，具有翻转动画效果。
<div class="page front p3d">: 封面的正面页面，具有立体效果。
<div class="shadow"></div>: 贺卡正面页面的阴影效果。
<div class="pic"></div>: 贺卡正面页面的图片。
<div class="front-cover p3d">: 贺卡的前面封面部分。
<div class="page front flip p3d">: 前面封面的正面页面，具有翻转动画效果。
<p>: 正面页面中的文本内容，包括了对结婚的祝福。
<div class="page back"></div>: 前面封面的背面页面。

css部分:

css 复制代码

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
  }
  
  html{
    height: 100%;
  }
  body{
    height: 100%;
    font: 100%/1.25 Helvetica, arial, helvetica;
    color: #fff;
    perspective: 1000px;
    background: linear-gradient(to bottom, #444, #999);
  }
  
  .book{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
    cursor: pointer;
    user-select: none;
    transform: rotateX(60deg);
  }
  
  .page{
    width: 300px;
    height: 300px;
    padding: 1em;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 2em;
  }
  .front{
    background-color: #d93e2b;
  }
  .back{
    background-color: #fff;
  }
  .front-cover{
    transform-origin: 0 50%;
    transform: rotateY(-120deg);
  }
  .p3d{
    transform-style: preserve-3d;
  }
  .front-cover .back{
    background-image: url(https://img2.baidu.com/it/u=2368431681,4265369131&fm=253&fmt=auto&app=138&f=JPEG?w=595&h=500);
    background-size: cover;
    transform: translateZ(3px);
  }
  .flip{
    transform: rotateY(180deg);
  }
  
  .shadow,
  .pic{
    width: 196px;
    height: 132px;
    position: absolute;
    left: 60px;
    top: 60px;
    transform-origin: 0 100%;
  }
  
  .pic{
    background: url(https://q4.itc.cn/q_70/images03/20240405/39ec09deda3a41d79e03897b0fdf68a0.jpeg);
    background-size: cover;
  }
  .shadow{
    background-color: rgba(0, 0, 0, 0.5);
  }

js代码：

js 复制代码

  <script>
    // 鼠标摁住事件
    // 鼠标移动事件
    var hold = false
    var page = document.querySelector('.front-cover')
    var clamp = function(val, min, max) {
      return Math.max(min, Math.min(val, max))
    }


    page.onmousedown = function () {
      hold = true
    }
    window.onmouseup = function () {
      hold = false
    }

    window.onmousemove = function(e) {  // 摁住才能执行
      if (hold == true) {
        console.log(e.pageX);
        var angle = clamp((window.innerWidth / 2 - e.pageX + 300) / 300 * -90, -180, 0)

        page.style.transform = `rotateY(${angle}deg)`

        // pic 要立起来 饶x轴旋转  angle / 2

        // shadow 要倾斜x  angle / 8


      }
    }

  </script>

<script>: JavaScript 脚本开始标签。
var hold = false: 定义了一个变量 hold，用于判断鼠标是否被按住。
var page = document.querySelector('.front-cover'): 使用 document.querySelector() 方法选择了类名为 .front-cover 的元素，并赋值给了变量 page。
var clamp = function(val, min, max) { ... }: 定义了一个名为 clamp 的函数，用于限制某个值在最小值和最大值之间。
page.onmousedown = function () { ... }: 当鼠标按下时，将 hold 设置为 true。
window.onmouseup = function () { ... }: 当鼠标抬起时，将 hold 设置为 false。
window.onmousemove = function(e) { ... }: 当鼠标移动时触发的事件处理函数，用于实现页面的翻转效果。

在 window.onmousemove 的处理函数中，首先判断鼠标是否被按住（即 hold 是否为 true），如果是，则根据鼠标的位置计算出旋转角度，并通过修改页面的 transform 属性来实现页面的翻转效果。

结束语

在本文中，我们探讨了如何使用 JavaScript 创建一个互动式的电子贺卡。通过简单的 HTML 和 CSS，加上 JavaScript 的动态功能，我们能够制作出既个性化又有趣的贺卡。无论是为了庆祝节日、生日，还是仅仅为了给某人带来一点惊喜，这种贺卡都是一个绝佳的选择。

我们希望大家能够利用这篇文章中的知识，发挥创意，制作出属于自己的独特贺卡。``` 在本文中，我们探讨了如何使用 JavaScript 创建一个互动式的电子贺卡。通过简单的 HTML 和 CSS，加上 JavaScript 的动态功能，我们能够制作出既个性化又有趣的贺卡。无论是为了庆祝节日、生日，还是仅仅为了给某人带来一点惊喜，这种贺卡都是一个绝佳的选择。

我们希望你能够利用这篇文章中的知识，发挥创意，制作出属于自己的独特贺卡。不要忘记分享你的作品，让更多的人感受到你的心意和创造力的魅力。祝你编程愉快，创作出更多美妙的作品！

Happy Coding!

markdown 复制代码

**Happy Coding!**

用代码传递心意：JavaScript 打造独特贺卡

前言

结束语