手把手教你实现一个摇摆的信息牌

一条会coding的Shark
770 阅读4分钟

前言

这次带大家来实现一个由 HTML 和 CSS 组合而成的效果，咖啡店招牌的摇摆信息牌。话不多说，我们直奔主题。

效果预览

整体效果如上所示。

HTML 部分

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

 <figure class="signboard">
      <div class="sign">COFFEE</div>
      <div class="strings"></div>
      <div class="pin top"></div>
      <div class="pin left"></div>
      <div class="pin right"></div>
    </figure>

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

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

CSS 部分

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

 .signboard {
      font-size: 10px;
      width: 40em;
      height: 30em;
      position: relative;
      animation: swinging 1.5s ease-in-out infinite alternate;
      transform-origin: 19.5em 0.9em;
    }
    .sign {
      width: 100%;
      height: 2.85em;
      background: burlywood;
      border-radius: 0.2em;
      position: absolute;
      bottom: 0;
      font-size: 7em;
      color: saddlebrown;
      font-family: serif;
      font-weight: bold;
      text-align: center;
      line-height: 3.3em;
      text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3), 0 -2px 0 rgba(0, 0, 0, 0.7);
    }
    .strings {
      width: 15em;
      height: 15em;
      border: 0.5em brown;
      border-style: solid none none solid;
      transform: rotate(45deg);
      position: absolute;
      top: 3.8em;
      left: 12.2em;
    }

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

.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的动画效果，相关代码如下。

 @keyframes swinging {
      from {
        transform: rotate(10deg);
      }
      to {
        transform: rotate(-10deg);
      }
    }

@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 类。相关代码如下。

.pin {
      width: 2.5em;
      height: 2.5em;
      border-radius: 50%;
      position: absolute;
    }
    .pin.top {
      background: gray;
      left: 18.7em;
    }
    .pin.left,
    .pin.right {
      background: brown;
      top: 11em;
      box-shadow: 0 0.2em rgba(255, 255, 255, 0.5);
    }
    .pin.left {
      left: 8em;
    }
    .pin.right {
      right: 8em;
    }

.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);：为左右两侧销钉添加了一个微小且带有半透明白色阴影，营造了一种立体的效果。

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

总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~

avatar
文章
阅读
粉丝