css和electron实现桌面小兔几🐇

展示图

前言 📖

最近对 electron 和 css 突感兴趣，稍微学习了下，恰好有以兔子为主题的征文比赛，就用所学的 css 和 electron 写了一个桌面版的小兔几 🐇，祝福大家兔年安康~

实现 👀

一、HTML+CSS先实现一只小兔几

大概拆分图
由图可见，该乖兔是由几个不同的 div 经过 css 的变换组装起来的~

主要用到的CSS属性为：border 属性（border-radius）、伪元素（before、after）、transform、动画（animation、@keyframes）.

1️⃣ border-radius

  • 设置四个参数的时候，第一个参数代表：左上 ，第二个参数代表：右上，第三个代表：右下，第四个参数代表左下，border-radius:左上 右上 右下 左下.

  • 种比较少见的写法那就是中间用斜杠 / 分割开来，这种写法可以控制固定边的圆角, 斜杠左右都可以写四个参数,border-radius:上1 上2 下3 下4 / 左1 右2 右3 左4.如下图所示：

  • 以脸蛋为例，用 border-radius 实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // html
     <div class="rabbit-face"></div>
    // css
     .rabbit-face {
        height: 9rem;
        width: 10rem;
        border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
        background-color: white;
        position: relative;
    }

2️⃣ ::before/::after 伪元素

  • 在 CSS 中，::before、::after 创建一个伪元素，before 是所选元素的第一个子元素,after 是所选元素的最后一个子元素。它通常用于向具有 content 属性的元素添加装饰性内容。默认情况下，它是内联的。

  • 注意 ⚠❗❗❗
    ::before 和::after 生成的伪元素包含在元素的格式化框中，因此不应用于替换的元素，如img或br元素。

  • 以眼睛为例

    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
    // html
    <div class="rabbit-eye rabbit-eye-left"></div>
    <div class="rabbit-eye rabbit-eye-right"></div>
    // css
     .rabbit-eye {
        border-radius: 50% 50% 50% 50%/55% 55% 45% 45%;
        position: absolute;
        z-index: 2;
        top: 3.75rem;
        height: 1.875rem;
        width: 1.75rem;
        background-color: black;
        transform-origin: center 70%;
        overflow: hidden;
      }
      /* 眼睛高光 */
      .rabbit-eye::before,
      .rabbit-eye::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 100%;
      }
      .rabbit-eye::before {
        top: 0.125rem;
        height: 40%;
        width: 40%;
        background-color: white;
      }
      .rabbit-eye::after {
        top: 0.788rem;
        left: 1.256rem;
        height: 20%;
        width: 20%;
        background-color: white;
      }
      .rabbit-eye-left {
        left: 2rem;
      }
      .rabbit-eye-right {
        right: 2rem;
      }

3️⃣ transform

  • transform CSS 属性允许您旋转、缩放、倾斜或转换元素。它修改了 CSS 可视化格式化模型的坐标空间。基础包括：

    · 旋转（rotate）
    · 缩放（scale）
    · 倾斜（skew）
    · 移动（translate）

  • Syntax 语法

    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
    /* Keyword values */
    transform: none;
    /_ Function values _/
    transform: matrix(1, 2, 3, 4, 5, 6);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(17px);
    transform: rotate(0.5turn);
    transform: rotate3d(1, 2, 3, 10deg);
    transform: rotateX(10deg);
    transform: rotateY(10deg);
    transform: rotateZ(10deg);
    transform: translate(12px, 50%);
    transform: translate3d(12px, 50%, 3em);
    transform: translateX(2em);
    transform: translateY(3in);
    transform: translateZ(2px);
    transform: scale(2, 0.5);
    transform: scale3d(2.5, 1.2, 0.3);
    transform: scaleX(2);
    transform: scaleY(0.5);
    transform: scaleZ(0.3);
    transform: skew(30deg, 20deg);
    transform: skewX(30deg);
    transform: skewY(1.07rad);

    /_ Multiple function values _/
    transform: translateX(10px) rotate(10deg) translateY(5px);
    transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

    /_ Global values _/
    transform: inherit;
    transform: initial;
    transform: revert;
    transform: revert-layer;
    transform: unset;

  • 注意 ⚠❗❗❗
    只有可转换的元素可以被转换。也就是说，所有布局由 CSS 框模型控制的元素，除了:inline boxes, table-column boxes, and table-column-group boxes.

  • 以耳朵为例

    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
    // html
    <div class="rabbit-ear rabbit-ear-left-wrap">
      <div class="rabbit-ear-left"></div>
    </div>
    <div class="rabbit-ear rabbit-ear-right-wrap">
      <div class="rabbit-ear-left"></div>
    </div>
    // css
    .rabbit-ear {
      --ear-radius-right: 50% 20%;
      --ear-position-left: 1rem;
      position: absolute;
      z-index: -2;
      bottom: 8rem;
      height: 2rem;
      width: 1.25rem;
      transform-origin: top center;
      transform: rotate(var(--ear-rotate));
    }
    .rabbit-ear-left-wrap {
      --ear-rotate: -10deg;
      --keyframe-rotate-to: -25deg;
      right: calc(100% - 3.125rem);
    }
    .rabbit-ear-right-wrap {
      --ear-rotate: 10deg;
      --keyframe-rotate-to: 25deg;
      left: calc(100% - 7.125rem);
      bottom: 8.6rem;
    }
    .rabbit-ear-left {
      border-top-left-radius: 60% 48%;
      border-top-right-radius: 60% 48%;
      border-bottom-right-radius: 60%;
      border-bottom-left-radius: 60%;
      position: absolute;
      bottom: 0;
      left: var(--ear-position-left, auto);
      height: 10rem;
      width: 4rem;
      transform-origin: center bottom;
      transform: rotate(var(--ear-rotate));
      background-color: white;
      overflow: hidden;
      perspective: 1000px;
      animation: rotateThing 2s ease-in-out infinite alternate;
    }
    .rabbit-ear-left::before,
    .rabbit-ear-left::after {
      content: "";
      position: absolute;
    }
    .rabbit-ear-left::before {
      top: 2.5rem;
      left: 50%;
      height: 6rem;
      width: 2rem;
      transform: translateX(-50%);
      border-radius: inherit;
      background-color: #f5879b;
      opacity: 0.3;
    }

4️⃣ animation

  • animation 简写 CSS 属性在样式之间应用动画。它是以下合起来的的缩写.

    • animation-delay
      在开始执行动画之前将动画应用到元素的等待时间.动画可以稍后开始，从一开始立即开始，或者在动画的中途立即开始
      1
      animation-delay: 250ms;
    • animation-direction
      动画方向 CSS 属性设置动画应该向前、向后播放，还是在向前和向后播放序列之间来回交替播放
      1
      animation-direction: normal;
    • animation-duration
      动画持续时间 CSS 属性设置动画完成一个周期所需的时间长度
      1
      animation-duration: 3s;
    • animation-fill-mode
      animation-fill-mode CSS 属性设置 CSS 动画在执行之前和之后如何应用样式到它的目标
      1
      2
      animation-fill-mode: forwards;
      animation-delay: 1s;
    • animation-iteration-count
      设置动画序列在停止前应该播放的次数
      1
      animation-iteration-count: 2;
    • animation-name
      指定一个或多个@keyframes -rules 的名称，用于描述应用到元素上的动画。多个@keyframe at-rules 被指定为逗号分隔的名称列表。如果指定的名称与任何@keyframe at-rule 不匹配，则没有属性动画
      1
      animation-name: sliding-vertically;
    • animation-play-state
      CSS 的 animation-play-state 属性用来设置动画是正在运行还是暂停
      1
      animation-play-state: running/paused;
    • animation-timing-function
      CSS 的 animation-timing-function 属性设置动画如何在每个周期中进行
      1
      animation-timing-function: ease

  • 以兔子眨眼和晃动耳朵为例

    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
    // html 和上个例子一样
    // css
    // 眨眼
    @keyframes blink {
      0%,
      9%,
      11%,
      19%,
      21%,
      69%,
      71%,
      100% {
        transform: scaleY(1);
      }
      10%,
      20%,
      70% {
        transform: scaleY(0);
      }
    }
    .rabbit-eye {
      ...
      /* 眨眼动画 */
      animation: blink 7s infinite;
    }
    // 动耳
    @keyframes rotateThing {
      100% {
        transform: rotate(var(--keyframe-rotate-to));
      }
    }
    .rabbit-ear-left {
      ...
      /* 动耳动画 */
      animation: rotateThing 2s ease-in-out infinite alternate;
    }

css 效果图

其他小兔几部件的 css 也类似，多点耐心即可实现，完整小兔子如下：
一只会动的 🐇

二、搭建electron将兔子放进去

效果展示 🤡

一只在桌面上会动的 🐇

代码链接 🔗

具体完整代码放于 gitee 上：项目地址

结语 📜

  • 🐰 前“兔”无量

  • 🐰 新的一年“兔”be fine

  • 🐰 加油打气“兔”飞猛进

  • 🐰 称心如意“兔”个吉利

  • 🐰“免”young!“兔”much!

  • 🐰“钱”“兔”无忧！