[兔了个兔]css和electron实现桌面小兔几🐇

ADfish
2,806 阅读5分钟

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

前言 📖

最近刚好在弄electron，就用electron和css写了一只桌面小兔几🐇，祝福大家兔年安康~

实现 👀

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

basic-rabbit.png

由图可见，该乖兔是由几个不同的 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.png

  • 以脸蛋为例，用 border-radius 实现 
    // 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;
}

rabbit-head.png

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

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

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

  • 以眼睛为例

    // 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;
  }

rabbit-eye.png

3️⃣ transform

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

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

transform.png

  • Syntax 语法

    /* 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.

  • 以耳朵为例

    // 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;
}

rabbit-ear.png

4️⃣ animation

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

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

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

    // 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;
}

rabbit-animation.gif

css 效果图

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

二、搭建electron将兔子放进去

  • 🐰 使用 vue cli 创建 vue 项目

  • 🐰 使用 vue-cli-plugin-electron-builder 插件直接构建

  • 🐰 使用 electron-icon-builder, 生成符合 Electron 的图标

  • 🐰 在vue路由里加上对应的小兔几页面

  • 🐰 安装好之后，配置background.js

效果展示 👀

2023-01-17-17-34-01.gif

代码链接 🔗

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

结语 📜

祝大家：

🐰 前“兔”无量

🐰 新的一年“兔”be fine

🐰 加油打气“兔”飞猛进

🐰 称心如意“兔”个吉利

🐰“免”young!“兔”much!

🐰“钱”“兔”无忧！

avatar
文章
阅读
粉丝