2023年，给大家送个兔年专属新春贺卡

一条会coding的Shark
2,551 阅读4分钟

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

时间过得真快，2023年了，一下子又老了一岁，在这里祝大家2023新年快乐。对于2023年我想对自己说的是，希望自己越来越好。好了，我们回归正题，既然是新春，那我们需要一张张贺卡来记录并告别过去的2022年，写给2023年的自己。因此，我给大家带来的是如何制作一张简易版兔年专属新春贺卡。

新春贺卡

这里先来给大家看看效果。

QQ录屏20230110162641.gif

这张贺卡最主要的地方是关于css样式的制作，这里代码会比较繁多，因此我会重点介绍一下关键部分代码。

html部分

首先我们来看下html部分的代码。

<body style="margin-top: 60px">
    <div id="wrap">
      <h1></h1>
      <div id="form_wrap">
        <form>
          <p>兔年快乐</p>
          <label for="name">发件人: </label>
          <input type="text" name="name" value="" id="from" />
          <label for="name">收件人: </label>
          <input type="text" name="to" value="" id="to" />
          <label for="email">您的祝福 : </label>
          <textarea name="message" value="Your Message" id="message"></textarea>
          <p></p>
          <button id="ok">已完成，可发送</button>
        </form>
      </div>
    </div>
  </body>

在html部分，我们需要加入基本的form表，这是贺卡的基本元素。表单里一共三个部分，分别是发件人，收件人以及您的祝福，这三个部分还是比较简单的，用基本的表单元素就可以完成。最后再加入一个按钮完成发送即可。

css部分

基本的html骨架搭建完毕，就要开始css内饰装修了。贺卡整体采用的字体样式如下：

font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;

首先我们来看一下贺卡整体的样式。

#wrap {
  width: 700px;
  margin: -80px auto 0;
  height: 1000px;
}
#form_wrap {
  overflow: hidden;
  height: 600px;
  position: relative;
  top: 350px;
  -webkit-transition: all 1s ease-in-out 0.3s;
  -moz-transition: all 1s ease-in-out 0.3s;
  -o-transition: all 1s ease-in-out 0.3s;
  transition: all 1s ease-in-out 0.3s;
}

这里主要是加入了transition过渡效果。在过渡效果中有个属性ease-in-out，它有先加速后减速的作用。从上面给出的最终效果我们能看出这个过渡。然后剩下的就是一些调整位置之类的样式了。

这里是信封的样式。

#form_wrap:before {
  content: "";
  position: absolute;
  bottom: 270px;
  left: 0px;
  background: url("https://s1.ax1x.com/2023/01/07/pSEz5vj.png");
  background-size: 100%;
  width: 100%;
  height: 320px;
}
#form_wrap:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  background: url("https://s1.ax1x.com/2023/01/07/pSEzDvd.png");
  background-size: 100%;
  width: 100%;
  height: 350px;
}

关于信封，我将两张本地图片转换为在线图片作为背景图片插入，然后进行样式的编写。对于样式，这里是通过伪元素:after和:before来实现的，这里要注意的是，:after和:before里一定要加入content属性，这样它们才能起作用。

最后来看一下表单form的样式。

form {
  background: #f7f2ec url("https://s1.ax1x.com/2023/01/10/pSmksij.jpg");
  background-size: 100%;
  position: relative;
  top: 250px;
  overflow: hidden;
  height: 200px;
  width: 600px;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
  -moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
  -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
  -webkit-transition: all 1s ease-in-out 0.3s;
  -moz-transition: all 1s ease-in-out 0.3s;
  -o-transition: all 1s ease-in-out 0.3s;
  transition: all 1s ease-in-out 0.3s;
}

表单部分同信封一样，也是将一张本地图片转换为在线图片插入，这里加入了transition过渡效果，剩下的就是一些诸如阴影效果的编写，当然这一部分各位也可以随意发挥，这里主要是体现背景图片和过渡效果。

上面就是一些关键部分的代码了，剩下的其他css样式，大家可以在下面附上的码上掘金里查看。其实没有很大难点，主要是代码比较多，导致看起来比较杂，所以建议慢慢消化，也可以自由发挥。

js部分

这里加入JS主要是负责一些简单的校验交互。比如说当没有输入收件人的时候，会弹出弹窗来提示请填写收件人，当全部都填写好了之后，会弹出发送成功的弹窗。总之，这里的JS部分是做了一些简单的交互来丰富这个贺卡效果。整体而言并不难，相关代码如下：

 <script>
    var btn1 = document.getElementById("ok");
    var fm = document.getElementById("from");
    var to = document.getElementById("to");
    var message = document.getElementById("message");
    btn1.onclick = function () {
      if (fm.value == null || fm.value == "") alert("请填写发件人");
      else if (to.value == null || to.value == "") alert("请填写收件人");
      else if (message.value == null || message.value == "")
        alert("请填写祝福语");
      else {
        var r = confirm("确定检查无误吗？");
        if (r == true)
          alert("发送成功")
      }
    };
  </script>

总结

以上就是关于新春贺卡的实现过程了，虽然过程比较简单，但是贺卡的效果还是不错的。通过CSS来搭配简单的JS来实现这个贺卡，大家也可以亲自去尝试一下，只有尝试了才知道效果如何。当然如果有可以完善的地方欢迎大家在评论区告诉我，整体代码可以参考码上掘金地址。

最后，在这里祝大家在新的一年健健康康，平平安安，阖家欢乐，兔年大吉。

avatar
文章
阅读
粉丝