HUA

HTML 部分

首先我们看到HTML部分。相关代码如下。

 1 <figure class="signboard">
 2      <div class="sign">COFFEE</div>
 3      <div class="strings"></div>
 4      <div class="pin top"></div>
 5      <div class="pin left"></div>
 6      <div class="pin right"></div>
 7    </figure>

在这里声明了一些元素，比如signboard和sign，也包含一个 figure 元素，表示一个独立的内容单元，通常用于包含独立的流内容（比如图片、图表、照片、代码等）。在这个示例中，它代表了一个咖啡店的招牌。这些元素形成了后面整个效果的基础骨架，有了这些，我们后面就可以为它们添加CSS样式。

这些元素一起形成了整个咖啡店招牌的结构，通过CSS样式和动画，创建了一个炫目而生动的效果。

CSS 部分

接下来就是CSS部分了。相关代码如下。

 1 .signboard {
 2      font-size: 10px;
 3      width: 40em;
 4      height: 30em;
 5      position: relative;
 6      animation: swinging 1.5s ease-in-out infinite alternate;
 7      transform-origin: 19.5em 0.9em;
 8    }
 9    .sign {
10      width: 100%;
11      height: 2.85em;
12      background: burlywood;
13      border-radius: 0.2em;
14      position: absolute;
15      bottom: 0;
16      font-size: 7em;
17      color: saddlebrown;
18      font-family: serif;
19      font-weight: bold;
20      text-align: center;
21      line-height: 3.3em;
22      text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3), 0 -2px 0 rgba(0, 0, 0, 0.7);
23    }
24    .strings {
25      width: 15em;
26      height: 15em;
27      border: 0.5em brown;
28      border-style: solid none none solid;
29      transform: rotate(45deg);
30      position: absolute;
31      top: 3.8em;
32      left: 12.2em;
33    }

这段代码由三部分组成，接下来会分别对这三部分进行剖析。

.signboard

  • font-size: 10px;：设置字体大小为 10 像素。
  • position: relative;：设定为相对定位，这表示后代元素的绝对定位会以此为准。
  • animation: swinging 1.5s ease-in-out infinite alternate;：应用名为swinging的旋转动画，动画时长为 1.5 秒，运动是缓慢的，而且是从终点到起点循环。
  • transform-origin: 19.5em 0.9em;：指定了变换的原点位置。

在此处声明了一个swinging的动画效果，相关代码如下。

 1 @keyframes swinging {
 2      from {
 3        transform: rotate(10deg);
 4      }
 5      to {
 6        transform: rotate(-10deg);
 7      }
 8    }

@keyframes swinging 定义了名为 swinging 的摆动动画。根据动画的定义，招牌在 1.5 秒内来回摆动（从正10度到负10度）。

.sign

  • width: 100%; height: 2.85em;：设置 .sign 的宽度为父元素(.signboard)的 100%，高度为 2.85em。
  • background: burlywood;：设置背景色为褐色。
  • border-radius: 0.2em;：边框的圆角半径为 0.2em。
  • position: absolute; bottom: 0;：绝对定位，定位于父元素的底部。
  • font-size: 7em; color: saddlebrown; font-family: serif; font-weight: bold;：设置了文本的样式，包括字体大小、颜色、字体族和加粗。
  • text-align: center;：文本居中对齐。
  • line-height: 3.3em;：设置行高为 3.3em。
  • text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3), 0 -2px 0 rgba(0, 0, 0, 0.7);：设置文本的阴影效果。

.strings

  • border: 0.5em brown; border-style: solid none none solid;：设置边框的宽度和样式。
  • transform: rotate(45deg);：旋转变换，使元素顺时针旋转 45 度。
  • position: absolute; top: 3.8em; left: 12.2em;：绝对定位，定位于父元素(.signboard)的左上角。

以上这些规则用于创建漂亮的咖啡店招牌并赋予其动感效果。

接下来是 .pin 类。相关代码如下。

 1.pin {
 2      width: 2.5em;
 3      height: 2.5em;
 4      border-radius: 50%;
 5      position: absolute;
 6    }
 7    .pin.top {
 8      background: gray;
 9      left: 18.7em;
10    }
11    .pin.left,
12    .pin.right {
13      background: brown;
14      top: 11em;
15      box-shadow: 0 0.2em rgba(255, 255, 255, 0.5);
16    }
17    .pin.left {
18      left: 8em;
19    }
20    .pin.right {
21      right: 8em;
22    }

.pin

  • width: 2.5em; height: 2.5em;：设置销钉元素的宽度和高度为 2.5 像素。
  • border-radius: 50%;：将销钉的圆角半径设置为 50%，使其呈现为圆形。
  • position: absolute;：将销钉设置为绝对定位。

.pin.top

  • background: gray;：设置顶部销钉的背景颜色为灰色。
  • left: 18.7em;：设置顶部销钉的 left 值。

.pin.left 和 .pin.right

  • background: brown;：设置左右两侧销钉的背景颜色为褐色。
  • top: 11em;：设置左右两侧销钉的 top 值。
  • box-shadow: 0 0.2em rgba(255, 255, 255, 0.5);：为左右两侧销钉添加了一个微小且带有半透明白色阴影，营造了一种立体的效果。

这些定义产生了一个带有动画效果的咖啡店招牌。通过使用关键帧动画和各个元素的样式设置，实现了招牌的动感效果。

个人笔记记录 2021 ~ 2025