制作电子贺卡，用最高端的方式表达最美好的祝福 前言

发表于

前言

亲爱的掘友，假设若干年之后，你的好朋友结婚了，而作为一个对编码非常有兴趣的我们，除了手写贺卡表达祝福之外，是否可以运用我们的知识所学，去制作一个电子的贺卡，以表达最美好的祝福呢？

小项目准备工作

  1. html,css,js相关的基本知识
  2. 贺卡的祝福语，贺卡的封面和里面的图片

html部分

重点部分说明

这段代码是一个简单的HTML结构，其中包含了一个书籍的封面和祝福文字。

  1. HTML（Hypertext Markup Language） : HTML是用于创建网页的标记语言。它由一系列标签组成，这些标签描述了文档的结构和语义。
  2. CSS（Cascading Style Sheets） : CSS用于控制网页的样式和布局。在这段代码中，应用了一些CSS类来定义书籍封面的样式，例如.book-cover和.front-cover。
  3. 3D 变换（3D Transformations） : 代码中使用了一些带有3D效果的CSS类，如.p3d和.flip，这些类可以通过CSS 3D变换属性（例如transform）来实现元素在3D空间中的旋转、倾斜等效果。
  4. DIV（Division）元素: <div>元素是HTML中用于创建容器的标签，可以将其他元素组织在一起，并对它们应用样式或脚本。
  5. 文本内容: 在代码中包含了一段祝福小王和小张的结婚祝福语录，通过<p>标签表示段落，这段文字将显示在书籍封面的正面。

这些基础知识涵盖了HTML和CSS的基本概念，以及一些关于3D变换的简单理解。

代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
xml复制代码  <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>
          祝福小王和小张，从此携手共渡人生的每一刻，相互扶持，相互
          理解，共同构筑一座幸福的家园。婚姻是生活的新起点，愿
          你们在这段新的旅程中，愿你们的婚姻像一朵绽放的鲜花，散发
          着芬芳和美好；像一颗稳固的灯塔，照亮前行的路途。无论是
          欢乐还是挑战，都能紧握彼此的手，共同面对，共同成长。愿你们的
          爱情像阳光一样温暖，像清风一样
          舒爽，永远绽放着美丽和幸福。愿你们的婚姻像一首美妙的乐章
          ，奏响幸福的旋律，永远充满着欢笑和快乐。祝福你们，永远幸福美满！
        </p>
      </div>
      <!-- 背面页 -->
      <div class="page back"></div>
    </div>
  
  </div>

html部分小结

我们描述了一个带有3D效果的书籍容器，其中包括书籍封面和书籍正面封面。

  1. <div class="book p3d">：这是整个书籍容器的主要部分，具有类名”p3d”，表示使用了某种3D效果。
  2. <div class="book-cover p3d">：这是书籍封面的部分，同样具有类名”p3d”，表示封面也应用了3D效果。
* `<div class="page back flip"></div>`：这个元素代表书籍封面的背面页，有翻转的效果，类名"flip"指示它可以实现翻转动画效果。
* `<div class="page front p3d">`：这个元素代表书籍封面的正面页，同样具有类名"p3d"，表示它也应用了3D效果。


    + `<div class="shadow"></div>`：这个元素代表书籍封面的阴影效果。
    + `<div class="pic"></div>`：这个元素代表书籍封面的图片，即封面图。
  1. <div class="front-cover p3d">：这是书籍正面封面的部分，同样具有类名”p3d”，表示正面封面也应用了3D效果。
* `<div class="page front flip p3d">`：这个元素代表正面封面的正面页，具有翻转和3D效果。


    + `<p>...</p>`：这个段落包含了祝福的文字内容，描述了对小王和小张的祝福。
* `<div class="page back"></div>`：这个元素代表正面封面的背面页。

css部分

接下来，让我们用css对它进行装饰

重点部分说明

要理解这段CSS代码，首先需要一些基础知识：

  1. Box Model：了解盒模型，包括内容、内边距、边框和外边距等部分，以及如何使用box-sizing属性来调整盒模型的计算方式。
  2. CSS选择器：熟悉CSS选择器，包括元素选择器、类选择器、ID选择器、伪类和伪元素等，以及它们的优先级规则。
  3. Transform和Perspective：了解CSS的transform属性和perspective属性，以及它们在页面中创建2D和3D变换效果的能力。
  4. CSS动画和过渡：了解如何使用CSS动画和过渡来实现元素的动态效果。
  5. 背景图像和渐变：了解如何使用CSS设置背景图像和渐变色。
  6. 视角和透视：理解透视视角的概念，以及如何使用透视属性来创建3D效果。

一旦掌握了这些基础知识，就可以开始解析这段代码。我们主要实现了一个带有3D效果的书籍容器，其中包括书籍封面和正面封面。具体的CSS规则会应用于不同的元素，例如.book、.page、.front、.back等，以及一些属性如transform、background-color、background-image等，用来定义元素的外观和行为。

代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
css复制代码/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

/* 设置HTML元素高度为100% */
html {
  height: 100%;
}

/* 设置body元素高度为100%，定义字体、颜色和透视效果 */
body {
  height: 100%;
  font: 100%/1.25 Helvetica, arial, helvetica; /* 字体设置为Helvetica */
  color: #fff; /* 文字颜色为白色 */
  perspective: 1000px; /* 设置透视效果的视距为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); /* 沿X轴旋转60度，实现倾斜效果 */
}

/* 页面样式 */
.page {
  width: 300px;
  height: 300px;
  padding: 1em; /* 设置内边距 */
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 2em; /* 文本首行缩进2em */
}

/* 正面样式 */
.front {
  background-color: #d93e2b; /* 设置背景颜色 */
}

/* 背面样式 */
.back {
  background-color: #fff; /* 设置背景颜色为白色 */
}

/* 封面正面样式 */
.front-cover {
  transform-origin: 0 50%; /* 设置旋转中心为左边缘的中点 */
  transform: rotateY(0deg); /* 沿Y轴旋转0度，初始状态 */
}

/* 3D效果样式 */
.p3d {
  transform-style: preserve-3d; /* 设置子元素在三维空间内保持平铺 */
}

/* 封面背面样式 */
.front-cover .back {
  background-image: url(./微信截图_20240421113536.png); /* 设置背景图像 */
  background-size: 100%; /* 图像大小为100% */
  transform: translateZ(3px); /* 沿Z轴平移3px，实现3D效果 */
}

/* 翻转效果样式 */
.flip {
  transform: rotateY(180deg); /* 沿Y轴旋转180度，实现翻转效果 */
}

/* 阴影和图片容器样式 */
.shadow,
.pic {
  width: 196px;
  height: 132px;
  position: absolute;
  left: 60px;
  top: 60px;
  transform-origin: 0 100%; /* 设置旋转中心为左下角 */
}

/* 图片容器样式 */
.pic {
  background: url(./微信截图_20240421113550.png); /* 设置背景图片 */
  background-size: cover; /* 图片大小为覆盖容器 */
}

/* 阴影样式 */
.shadow {
  background-color: rgba(0, 0, 0, 0.5); /* 设置半透明黑色背景 */
}

css部分小结

这段 CSS 代码主要用于创建一个具有翻书效果的书籍样式。

  1. 通用样式：
* 将所有元素的边距、填充、边框设置为零，盒子模型设为边框盒模型。
  1. HTML 和 Body 样式：
* 设置 HTML 和 Body 元素的高度为100%。
* 设置页面字体为 Helvetica，字体大小为100%的基础上增加25%。
  1. 书籍容器样式 (.book)：
* 设置书籍容器的宽度和高度为300px，绝对定位并水平垂直居中。
* 鼠标悬停时显示指针，并禁止选择内容。
* 应用3D旋转效果，使其看起来像倾斜的书本。
  1. 页面样式 (.page)：
* 设置页面的宽度和高度为300px，绝对定位在左上角。
* 设置内边距为1em，并设置文本首行缩进为2em。
  1. 正面样式 (.front) 和 背面样式 (.back)：
* 设置正面背景颜色为 #d93e2b（深红色），背面背景颜色为白色。
  1. 封面样式 (.front-cover)：
* 设置封面旋转的原点在左侧中点。
* 设置封面的背面为一个指定的图片，并应用3D效果。
  1. 3D效果样式 (.p3d)：
* 设置子元素在三维空间内保持平铺。
  1. 翻转效果样式 (.flip)：
* 通过旋转180度实现翻转效果。
  1. 图片容器样式 (.pic) 和 阴影样式 (.shadow)：
* 设置图片容器和阴影的样式和位置，其中图片容器有一张指定的背景图片，阴影为半透明黑色。

js部分

重点部分说明

这段 JavaScript 代码实现了鼠标按住并移动时的交互效果，主要用于控制书籍封面的翻转和阴影效果。

  1. 定义了变量 hold，用于标识鼠标是否按住。
  2. 获取了书籍封面的元素节点，并定义了一个函数 clamp 用于限制值的范围在指定的最小值和最大值之间。
  3. 给封面元素添加了鼠标按下事件监听器 (onmousedown)，当鼠标按下时将 hold 设置为 true。
  4. 给窗口添加了鼠标松开事件监听器 (onmouseup)，当鼠标松开时将 hold 设置为 false。
  5. 给窗口添加了鼠标移动事件监听器 (onmousemove)，当鼠标移动时执行相应操作：
* 如果鼠标按住 (`hold == true`)，则执行以下操作：


    + 计算鼠标移动的角度，并根据窗口宽度和鼠标位置来计算旋转角度，使封面随鼠标移动而旋转，实现翻书效果。
    + 根据计算得到的角度，通过设置封面元素的 `transform` 属性来实现旋转。
    + 针对书籍封面上的图片容器 (`pic`) 和阴影 (`shadow`)，可能还需要根据旋转角度来调整它们的倾斜角度，以使得交互效果更加逼真。

代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
xml复制代码<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; // 当鼠标按下时，将 hold 设置为 true
  }

  // 鼠标松开事件监听器
  window.onmouseup = function () {
    hold = false; // 当鼠标松开时，将 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);

      // 设置封面元素的 transform 属性，使其随鼠标移动而旋转
      page.style.transform = `rotateY(${angle}deg)`;

      // 对书籍封面上的图片容器（pic）进行立起来的旋转，绕 x 轴旋转 angle / 2
      // 对阴影（shadow）进行倾斜，沿 x 轴倾斜 angle / 8
    }
  }
</script>

js部分小结

当鼠标按下时，设置 hold 变量为 true，表示鼠标已按下。 当鼠标松开时，将 hold 变量设置为 false，表示鼠标已经松开。 监听鼠标移动事件，在鼠标移动时执行相应操作。 通过 document.querySelector('.front-cover') 获取页面中 class 为 .front-cover 的元素。 定义了一个 clamp 函数，用于限制一个值在指定范围内。 计算旋转角度 angle，根据鼠标位置调整角度，使封面元素随鼠标水平移动而旋转，并限制旋转角度在 -180 到 0 度之间。 使用 style.transform 属性将计算得到的旋转角度应用到封面元素，实现立体效果。 通过 console.log(e.pageX) 输出鼠标横坐标位置。

实现效果图（可翻阅）

微信截图_20240421114952.png

项目小结

完成这个小项目后，有没有感觉自己就像是一位魔术师，把一本普通的书变成了一个会动的对象！虽然并没有让书飞起来或者变出兔子，但能让书封面随着鼠标的动作而自如地翻转，也是一种小小的魔法吧！

在编写代码的过程中，我们学到了如何使用JavaScript来捕捉鼠标事件，并根据鼠标位置的变化来实现元素的旋转效果。虽然刚开始可能有些困难，但通过不断调试和尝试，最终成功实现了预期的效果。

最重要的是，通过这个项目，我们更深入地理解了前端开发中的交互性设计，以及如何通过简单的动画和交互来增加用户体验。总的来说，虽然是个小项目，但收获颇丰，让我们更加热爱前端开发这个神奇的领域！

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%