CSS简单实现一幅新春对联

前言

今年过年家里没有贴春联，这两天在网上看到一幅对联，觉得写得挺好的， 上联——只生欢喜不生愁；下联——此心安处是吾家； 横批——平安喜乐， 因此使用css简单实现这幅新春对联。

具体实现

页面先做一个简单描述，首先页面中间有一个大门，然后在大门两侧实现春联的上下联，大门的上面实现春联的横批，再做一个打开大门，出现兔年祝福图片的效果。

效果展示：（毛笔字体文件没有线上的资源，所以字体没有效果） code.juejin.cn/pen/7197022…

页面整体布局：

<div class="wrapper">
    <div class="container">
      <div class="title">平安喜乐</div>
      <div class="content">
        <h1>此心安处是吾家</h1>
        <div class="door">
          <div class="door-l"></div>
          <div class="door-r"></div>
          <!-- 送福图片 -->
          <img src="/4034970a304e251fb44609698ce95a1c7e3e536c.webp" alt="" class="pic">
        </div>
        <h1>只生欢喜不生愁</h1>
      </div>
    </div>
  </div>

1. 大门的实现

大门的总体宽高都设置成350px，设置视角(perspective：1000px), 大门打开的时候呈现一种3D的视觉感受。

大门分成左右两部分门扇，使用绝对定位控制左右的位置，并使用transform-origin属性设置大门旋转动画的基点，默认情况下，元素的动作参考点（基点）为元素盒子的中心（center），这里设置左边门扇的transform-origin: left，左门扇以左边基点旋转；右边门扇的transform-origin: right，右门扇以右边基点旋转。

大门门扇的圆形门环使用伪元素实现，使用hover属性实现当鼠标移到大门上时，大门的门扇分别旋转一定的角度，实现打开大门的效果

兔年祝福图片使用绝对定位控制在大门的居中位置，并设置层级最低，当打开大门图片慢慢变大

.door {
  width: 350px;
  height: 350px;
  border: 2px solid #333;
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
}
.door .pic{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  object-fit: cover;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.3s ease-in;
}
.door-l,
.door-r {
  width: 50%;
  height: 100%;
  background-color: #e1b12c;
  position: absolute;
  top: 0;
  transition: all 0.5s;
}

.door-l {
  left: 0;
  border-right: 1px solid #000;
  transform-origin: left;
}

.door-r {
  right: 0;
  border-left: 1px solid #000;
  transform-origin: right;
}

.door-l::before,
.door-r::before {
  content: "";
  border: 1px solid #000;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}

.door-l::before {
  right: 5px;
}

.door-r::before {
  left: 5px;
}

.door:hover .door-l {
  transform: rotateY(-120deg);
}

.door:hover .door-r {
  transform: rotateY(120deg);
}
.door:hover .pic{
  width: 100%;
}

2. 春联的实现

春联一般是用毛笔写的，因此在网上找了一款毛笔字体下载下来，并引入到样式中，并给春联设置红色的背景

网上下载下来的毛笔字体为trueType格式(.ttf，Windows和Mac上常见的字体格式，是一种原始格式，没有为网页进行优化处理)，需要转换成Web Open Font格式（.woff，针对网页进行特殊优化，是Web字体中最佳格式）。可以在这个网站上传字体进行转换

@font-face 用于设置自定义字体，可以自定义字体名称。两个必要属性：

• font-family：给引入的字体起一个名称，注意：名字不要和那些专属的名称起冲突了，比如：微软雅黑。

• src：自定义字体的路径，一般采用相对路径去使用。

@font-face {
  font-family: 'YFJLXS8';
  src: url('./font.woff2') format('woff2'),
    url('./font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
.wrapper {
  height: 100vh;
  font-family: 'YFJLXS8', 'Courier New', Courier, monospace;
  padding: 50px;
  overflow: hidden;
  background: #ccc;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44%;
  margin: 20px auto;
}
h1 {
  font-size: 40px;
  font-weight: 700;
  width: 5vw;
  color: #000;
  line-height: 1;
  text-align: center;
  background-color: #d63031;
  padding: 20px 0;
}
.title{
  width: 20%;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  background-color: #d63031;
}

作者：sherlockkid7
来源：juejin.cn/post/7196994373237866553