ShawDubie

设计师：就一个 Button，简单的喔~~

前段时间在网上看到这样一个视频：

然后反手就发给了我司的设计小姐姐，小姐姐回了一个设计稿，看了设计稿之后，觉得还好，就简单实现了一下。咱们废话不多说，先看效果：

实现

解构视觉稿

通过观察视觉稿，我们可以发现整个 Button 主要由 4 部分构成：

圆形按钮 ☀️
圆形按钮周围的光晕
云朵 ☁️
夜晚模式下的星星 ⭐️

将视觉稿分解为上述几个模块之后，整个 Button 就没有那么复杂了。那么我们接下来就各个击破，分别去实现上述的几个模块。

容器

在实现上述几个模块之前，我们先为 Button 创建一个容器：

查看代码

<template>
  <div class="panel">
    <div 
      class="day-night-button"
      :class="{ 'day': isDay, 'night': !isDay }">
      ...
    </div>
  </div>
</template>

<script setup lang="ts">
const isDay = ref(true);
</script>

<style scoped>
.panel {
  width: 100%;
  height: 400px;
  background: #D8DEE9;
  display: flex;
  align-items: center;
  position: relative;
}
.day-night-button {
  width: 574px;
  height: 229px;
  border-radius: 371px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
}
.day.day-night-button {
  background: #416D9F;
}
.night.day-night-button {
  background: #000;
}
</style>

可以看到我们在容器 day-night-button 的最外层还增加了两个 class：day 和 night。这样做的目的是点击后面将要实现的圆形按钮时，可以通过变量来控制按钮的模式（白天或者黑夜）

圆形按钮 ☀️

实现思路：

两个圆形按钮在 DOM 层面是独立的：day-button 和 night-button。通过外层的 circle-button-content 包裹
两个按钮彼此重合，在模式切换的时候设置不同的透明度，使得过渡不会那么突兀
按钮的位置通过移动外层 circle-button-content 实现

为了方便阅读，这里省略其他代码

查看完整代码

<template>
  <div class="panel">
    <div class="day-night-button" :class="{ 'day': isDay, 'night': !isDay }">
      <div class="circle-button-content" @click="trigger">
        <div class="day-button"></div>
        <div class="night-button">
          <div class="small-night-circle top"></div>
          <div class="big-night-circle"></div>
          <div class="small-night-circle"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const isDay = ref(true);
const trigger = () => {
  isDay.value = !isDay.value;
}
</script>

<style scoped lang="scss">
.circle-button-content {
  width: 189px;
  height: 189px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
  position: relative;
  z-index: 10;
  .day-button {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0px;
    left: 0px;
    background: linear-gradient(180deg, #FFE169 0%, #F7D23C 99%);
    box-shadow: 8px 7px 8px 0px rgba(64, 64, 64, 0.5),inset -8px -4px 10px 0px rgba(0, 0, 0, 0.3),inset 4px 8px 10px 0px #FFFFFF;
    transition: all 0.7s ease-out;
    transition-delay: 0.3s;
  }
  .night-button {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, #CDD1E1 4%, #CCD0D8 99%);
    box-shadow: 7px 7px 17px 0px rgba(64, 64, 64, 0.8),inset -1px -9px 10px 0px rgba(0, 0, 0, 0.3),inset 6px 2px 9px 0px #FFFFFF;
    transition: all 0.7s ease-out;
    transition-delay: 0.3s;
  }
  .big-night-circle,
  .small-night-circle {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #A0A7B9;
    box-shadow: -2.7px 1.8px 1.8px 0px #FFFFFF,inset 0px 3.6px 7.2px 0px rgba(0, 0, 0, 0.3);
    top: 101px;
    left: 117px;
  }
  .small-night-circle.top {
    top: 22px;
    left: 72px;
  }
  .big-night-circle {
    width: 66px;
    height: 66px;
    top: 70px;
    left: 30px;
  }
}
.day {
  .circle-button-content {
    transform: translateX(20px);
  }
  .day-button {
    opacity: 1;
  }
  .night-button {
    opacity: 0;
  }
  .light-content {
    left: 0px;
  }
}
.night {
  .circle-button-content {
    transform: translateX(365px);
  }
  .day-button {
    opacity: 0;
  }
  .night-button {
    opacity: 1;
  }
}
</style>

光晕

实现思路：

三层光晕实际上是由 3 个圆叠加在一起的
白天模式和黑夜模式的光晕在 DOM 层面共用一套，通过 CSS 来控制显示的效果
白天模式和黑夜模式的动画效果实际上就是改变 3 个圆的背景颜色和位置

为了方便阅读，这里省略其他代码

查看完整代码

<template>
  <div class="panel">
    <div class="day-night-button" :class="{ 'day': isDay2, 'night': !isDay2 }">
      <!-- 圆形按钮 -->
      <div class="circle-button-content" @click="trigger2">...</div>
      <!-- 光晕 -->
      <div class="light-content">
        <div class="light1 light"></div>
        <div class="light2 light"></div>
        <div class="light3 light"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const isDay = ref(true);
const trigger = () => {
  isDay.value = !isDay.value;
}
</script>

<style scoped lang="scss">
.light-content {
  width: 100%;
  height: 100%;
  border-radius: 371px;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  .light {
    transition: all 1s ease-out;
    position: absolute;
    width: 400px;
    height: 353px;
    border-radius: 50%;
    background: #7599BF;
    top: -40px;
    left: -107px;
  }
  .light.light1 {
    z-index: 3;
  }
  .light.light2 {
    z-index: 2;
    left: -17px;
    background: #648DB8;
  }
  .light.light3 {
    z-index: 1;
    left: 73px;
    background: #5982B3;
  }
}
.night {
  .light-content {
    .light.light1 {
      background: #343848;
      z-index: 1;
      left: 110px;
    }
    .light.light2 {
      z-index: 2;
      background: #484D59;
      left: 199px;
    }
    .light.light3 {
      z-index: 3;
      background: #5D5E69;
      left: 290px;
    }
  }
}
</style>

云朵 ☁️

实现思路：

云朵☁️ 实际上是由上下两组 6 个圆组成的
动画效果只需要将整个云朵☁️移动到容器下就可以了

为了方便阅读，这里省略其他代码

查看完整代码

<template>
<div class="panel">
  <div class="day-night-button" :class="{ 'day': isDay3, 'night': !isDay3 }">
    <!-- 圆形按钮 -->
    <div class="circle-button-content" @click="trigger3">...</div>
    <!-- 光晕 -->
    <div class="light-content"></div>
    <!-- 云朵 -->
    <div class="clould">
      <div class="top-clould">
        <div class="top1"></div>
        <div class="top2"></div>
        <div class="top3"></div>
        <div class="top4"></div>
        <div class="top5"></div>
        <div class="top6"></div>
      </div>
      <div class="bottom-clould">
        <div class="top1"></div>
        <div class="top2"></div>
        <div class="top3"></div>
        <div class="top4"></div>
        <div class="top5"></div>
        <div class="top6"></div>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
const isDay = ref(true);
const trigger = () => {
  isDay.value = !isDay.value;
}
</script>

<style scoped lang="scss">
.clould {
  transition: all 1s ease-out;
  z-index: 4;
  position: absolute;
  width: 705px;
  height: 441px;
  top: -27px;
  left: -38px;
  .top-clould {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    div {
      position: absolute;
      border-radius: 50%;
      background: #B2C6DC;
    }
    .top1 {
      width: 272px;
      height: 272px;
      left: 0px;
      bottom: 0px;
    }
    .top2 {
      width: 179px;
      height: 179px;
      left: 212px;
      bottom: 95px;
    }
    .top3 {
      left: 318px;
      top: 167px;
      width: 105px;
      height: 105px;
    }
    .top4 {
      left: 368px;
      top: 106px;
      width: 199px;
      height: 199px;
    }
    .top5 {
      left: 451px;
      top: 80px;
      width: 203px;
      height: 203px;
    }
    .top6 {
      left: 507px;
      top: 0px;
      width: 198px;
      height: 198px;
    }
  }
  .bottom-clould {
    width: 684px;
    height: 327px;
    left: 44px;
    bottom: 53px;
    position: absolute;
    div {
      position: absolute;
      border-radius: 50%;
      background: #fff;
    }
    .top1 {
      left: 0px;
      top: 140px;
      width: 188px;
      height: 187px;
    }
    .top2 {
      left: 157px;
      top: 144px;
      width: 169px;
      height: 169px;
    }
    .top3 {
      left: 280px;
      top: 149px;
      width: 88px;
      height: 88px;
    }
    .top4 {
      left: 335px;
      top: 137px;
      width: 148px;
      height: 148px;
    }
    .top5 {
      left: 430px;
      top: 69px;
      width: 253px;
      height: 253px;
    }
    .top6 {
      left: 496px;
      top: 0px;
      width: 188px;
      height: 188px;
    }
  }
}
.night {
  .clould {
    top: 100%;
  }
}
</style>

星星⭐️

实现思路：

因为有许多颗 ⭐️，所以将 ⭐️ 设计为单独的组件
这里为了图省事（狗头），没有用 svg 去实现，这里用四个圆相切的方式实现 ⭐️ 的效果
动画：当圆形按钮移动到最右边时，然后出现 ⭐️。

星星 ⭐️ 组件

<template>
  <div class="star" :class="size">
    <i class="lt" :style="`background: ${background}`"></i>
    <i class="rt" :style="`background: ${background}`"></i>
    <i class="lb" :style="`background: ${background}`"></i>
    <i class="rb" :style="`background: ${background}`"></i>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    size: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: '#000'
    }
  }
})
</script>

<style scoped>
.star.large {
  width: 53px;
  height: 53px;
}
.star.middle {
  width: 15px;
  height: 19px;
}
.star.small {
  width: 8px;
  height: 10px;
}
.star {
  width: 23px;
  height: 29px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
i {
  position: absolute;
  display: inlin-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.lt {
  left: -50%;
  top: -50%;
}
.rt {
  top: -50%;
  left: 50%;
}
.lb {
  left: -50%;
  top: 50%;
}
.rb {
  top: 50%;
  left: 50%;
}
</style>

查看完整代码

<template>
<div class="panel">
  <div class="day-night-button" :class="{ 'day': isDay3, 'night': !isDay3 }">
    <!-- 圆形按钮 -->
    <div class="circle-button-content" @click="trigger3">...</div>
    <!-- 光晕 -->
    <div class="light-content">...</div>
    <!-- 云朵 -->
    <div class="clould">...</div>
    <!-- 星星 -->
    <div class="stars" :class="{ 'show-star': showStar }">
      <Star size="large" />
      <Star size="middle" />
      <Star size="small" />
      <Star size="small" />
      <Star size="small" background="#343848" />
      <Star size="small" background="#343848" />
      <Star size="small" background="#484D59" />
      <Star background="#484D59" />
      <Star background="#5D5E69" />
      <Star size="small" background="#5D5E69" />
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import Star from './Star.vue';

const isDay = ref(true);
const showStar = ref(false);
const trigger = () => {
  if (isDay.value) {
    setTimeout(() => {
      showStar.value = true;
    });
  } else {
    showStar.value = false;
  }
  isDay.value = !isDay.value;
};
</script>

<style scoped lang="scss">
.stars {
  position: absolute;
  width: 276px;
  height: 144px;
  z-index: 5;
  top: 41px;
  left: 62px;
}
</style>

<style lang="scss">
.stars .star {
  position: absolute;
  animation: star 1.5s infinite linear;
}
.stars {
  opacity: 0;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
  transition-delay: 1s;
}
.stars .star:nth-child(1) {
  left: 0px;
  top: 0px;
}
.stars .star:nth-child(2) {
  left: 0px;
  top: 89px;
}
.stars .star:nth-child(3) {
  left: 15px;
  top: 134px;
}
.stars .star:nth-child(4) {
  left: 31px;
  top: 125px;
}
.stars .star:nth-child(5) {
  left: 103px;
  top: 42px;
}
.stars .star:nth-child(6) {
  left: 118px;
  top: 27px;
}
.stars .star:nth-child(7) {
  left: 173px;
  top: 74px;
}
.stars .star:nth-child(8) {
  left: 181px;
  top: 110px;
}
.stars .star:nth-child(9) {
  left: 253px;
  top: 27px;
}
.stars .star:nth-child(10) {
  left: 257px;
  top: 101px;
}
.show-star.stars {
  opacity: 1;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
  transition-delay: 1s;
}
.day {
  .stars {
    display: none;
  }
}
@keyframes star {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
</style>

完善细节

完善一些细节，比如容器最外层添加阴影
按钮在下午 6 点之后自动切换为黑夜模式
设计师昵称在不同模式下的显示
加上设计稿链接

最后

整个按钮实现思路其实不是很复杂，划分好模块之后分而治之即可
实现起来确实挺费时的，花了大半天（至少 6 个小时）
据设计师小姐姐说，她花了一个小时，一边看电视一边做的😂😂（照应开头的视频，并点题）

完整代码

星星 ⭐️ 组件

<template>
  <div class="star" :class="size">
    <i class="lt" :style="`background: ${background}`"></i>
    <i class="rt" :style="`background: ${background}`"></i>
    <i class="lb" :style="`background: ${background}`"></i>
    <i class="rb" :style="`background: ${background}`"></i>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    size: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: '#000'
    }
  }
})
</script>

<style scoped>
.star.large {
  width: 53px;
  height: 53px;
}
.star.middle {
  width: 15px;
  height: 19px;
}
.star.small {
  width: 8px;
  height: 10px;
}
.star {
  width: 23px;
  height: 29px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
i {
  position: absolute;
  display: inlin-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.lt {
  left: -50%;
  top: -50%;
}
.rt {
  top: -50%;
  left: 50%;
}
.lb {
  left: -50%;
  top: 50%;
}
.rb {
  top: 50%;
  left: 50%;
}
</style>

Button 完整代码

<template>
  <div class="panel">
    <div class="day-night-button" :class="{ 'day': isDay, 'night': !isDay }">
      <div class="circle-button-content" @click="setIsDay">
        <div class="day-button"></div>
        <div class="night-button">
          <div class="small-night-circle top"></div>
          <div class="big-night-circle"></div>
          <div class="small-night-circle"></div>
        </div>
      </div>
      <div class="light-content">
        <div class="light1 light"></div>
        <div class="light2 light"></div>
        <div class="light3 light"></div>
      </div>
      <div class="clould">
        <div class="top-clould">
          <div class="top1"></div>
          <div class="top2"></div>
          <div class="top3"></div>
          <div class="top4"></div>
          <div class="top5"></div>
          <div class="top6"></div>
        </div>
        <div class="bottom-clould">
          <div class="top1"></div>
          <div class="top2"></div>
          <div class="top3"></div>
          <div class="top4"></div>
          <div class="top5"></div>
          <div class="top6"></div>
        </div>
      </div>
      <div class="stars" :class="{ 'show-star': showStar }">
        <Star size="large" />
        <Star size="middle" />
        <Star size="small" />
        <Star size="small" />
        <Star size="small" background="#343848" />
        <Star size="small" background="#343848" />
        <Star size="small" background="#484D59" />
        <Star background="#484D59" />
        <Star background="#5D5E69" />
        <Star size="small" background="#5D5E69" />
      </div>
      <div class="day-night-button-shadow"></div>
    </div>
    <p class="tip" :class="{'is-day-tip': isDay}">
      <a href="https://mastergo.com/goto/sbj7ANaO?page_id=189:0210&file=99242652305261" target="_blank">Designed by @吃肉的小羊 <span class="sleep">{{ !isDay ? '💤' : '' }}</span></a>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import dayjs from 'dayjs';
import Star from './Star.vue';

const isDay = ref(true);
const showStar = ref(false);

if (dayjs().hour() >= 18) {
  isDay.value = false;
  showStar.value = true;
}

const setIsDay = () => {
  if (isDay.value) {
    setTimeout(() => {
      showStar.value = true;
    });
  } else {
    showStar.value = false;
  }
  isDay.value = !isDay.value;
};
</script>

<style scoped lang="scss">
.panel {
  width: 100%;
  height: 600px;
  background: #D8DEE9;
  display: flex;
  align-items: center;
  position: relative;
}
.day-night-button-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 371px;
  top: 0px;
  left: 0px;
  box-shadow: 6px 7px 10px 0px #FFFFFF,inset 0px 4px 23px 0px #000000;
  z-index: 9;
}
.day-night-button {
  width: 574px;
  height: 229px;
  border-radius: 371px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
}
.day.day-night-button {
  background: #416D9F;
}
.night.day-night-button {
  background: #000;
}
.circle-button-content {
  width: 189px;
  height: 189px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
  position: relative;
  z-index: 10;
  .day-button {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0px;
    left: 0px;
    background: linear-gradient(180deg, #FFE169 0%, #F7D23C 99%);
    box-shadow: 8px 7px 8px 0px rgba(64, 64, 64, 0.5),inset -8px -4px 10px 0px rgba(0, 0, 0, 0.3),inset 4px 8px 10px 0px #FFFFFF;
    transition: all 0.7s ease-out;
    transition-delay: 0.3s;
  }
  .night-button {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, #CDD1E1 4%, #CCD0D8 99%);
    box-shadow: 7px 7px 17px 0px rgba(64, 64, 64, 0.8),inset -1px -9px 10px 0px rgba(0, 0, 0, 0.3),inset 6px 2px 9px 0px #FFFFFF;
    transition: all 0.7s ease-out;
    transition-delay: 0.3s;
  }
  .big-night-circle,
  .small-night-circle {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #A0A7B9;
    box-shadow: -2.7px 1.8px 1.8px 0px #FFFFFF,inset 0px 3.6px 7.2px 0px rgba(0, 0, 0, 0.3);
    top: 101px;
    left: 117px;
  }
  .small-night-circle.top {
    top: 22px;
    left: 72px;
  }
  .big-night-circle {
    width: 66px;
    height: 66px;
    top: 70px;
    left: 30px;
  }
}
.light-content {
  width: 100%;
  height: 100%;
  border-radius: 371px;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  .light {
    transition: all 1s ease-out;
    position: absolute;
    width: 400px;
    height: 353px;
    border-radius: 50%;
    background: #7599BF;
    top: -40px;
    left: -107px;
  }
  .light.light1 {
    z-index: 3;
  }
  .light.light2 {
    z-index: 2;
    left: -17px;
    background: #648DB8;
  }
  .light.light3 {
    z-index: 1;
    left: 73px;
    background: #5982B3;
  }
}
.clould {
  transition: all 1s ease-out;
  z-index: 4;
  position: absolute;
  width: 705px;
  height: 441px;
  top: -27px;
  left: -38px;
  .top-clould {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    div {
      position: absolute;
      border-radius: 50%;
      background: #B2C6DC;
    }
    .top1 {
      width: 272px;
      height: 272px;
      left: 0px;
      bottom: 0px;
    }
    .top2 {
      width: 179px;
      height: 179px;
      left: 212px;
      bottom: 95px;
    }
    .top3 {
      left: 318px;
      top: 167px;
      width: 105px;
      height: 105px;
    }
    .top4 {
      left: 368px;
      top: 106px;
      width: 199px;
      height: 199px;
    }
    .top5 {
      left: 451px;
      top: 80px;
      width: 203px;
      height: 203px;
    }
    .top6 {
      left: 507px;
      top: 0px;
      width: 198px;
      height: 198px;
    }
  }
  .bottom-clould {
    width: 684px;
    height: 327px;
    left: 44px;
    bottom: 53px;
    position: absolute;
    div {
      position: absolute;
      border-radius: 50%;
      background: #fff;
    }
    .top1 {
      left: 0px;
      top: 140px;
      width: 188px;
      height: 187px;
    }
    .top2 {
      left: 157px;
      top: 144px;
      width: 169px;
      height: 169px;
    }
    .top3 {
      left: 280px;
      top: 149px;
      width: 88px;
      height: 88px;
    }
    .top4 {
      left: 335px;
      top: 137px;
      width: 148px;
      height: 148px;
    }
    .top5 {
      left: 430px;
      top: 69px;
      width: 253px;
      height: 253px;
    }
    .top6 {
      left: 496px;
      top: 0px;
      width: 188px;
      height: 188px;
    }
  }
}
.stars {
  position: absolute;
  width: 276px;
  height: 144px;
  z-index: 5;
  top: 41px;
  left: 62px;
}
.day {
  .circle-button-content {
    transform: translateX(20px);
  }
  .day-button {
    opacity: 1;
  }
  .night-button {
    opacity: 0;
  }
  .light-content {
    left: 0px;
  }
}
.night {
  .circle-button-content {
    transform: translateX(365px);
  }
  .day-button {
    opacity: 0;
  }
  .night-button {
    opacity: 1;
  }
  .light-content {
    .light.light1 {
      background: #343848;
      z-index: 1;
      left: 110px;
    }
    .light.light2 {
      z-index: 2;
      background: #484D59;
      left: 199px;
    }
    .light.light3 {
      z-index: 3;
      background: #5D5E69;
      left: 290px;
    }
  }
  .clould {
    top: 100%;
  }
}
.tip {
  position: absolute;
  top: 100px;
  width: 220px;
  text-align: left;
  right: 50px;
  cursor: pointer;
  height: 40px;
  a {
    color: #416d9f8f;
  }
}
.sleep {
  display: inline-block;
}
.tip a {
  color: #00000073;
}
.is-day-tip.tip a {
  color: #416d9f8f;
}
</style>

<style lang="scss">
.stars .star {
  position: absolute;
  animation: star 1.5s infinite linear;
}
.stars {
  opacity: 0;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
  transition-delay: 1s;
}
.stars .star:nth-child(1) {
  left: 0px;
  top: 0px;
}
.stars .star:nth-child(2) {
  left: 0px;
  top: 89px;
}
.stars .star:nth-child(3) {
  left: 15px;
  top: 134px;
}
.stars .star:nth-child(4) {
  left: 31px;
  top: 125px;
}
.stars .star:nth-child(5) {
  left: 103px;
  top: 42px;
}
.stars .star:nth-child(6) {
  left: 118px;
  top: 27px;
}
.stars .star:nth-child(7) {
  left: 173px;
  top: 74px;
}
.stars .star:nth-child(8) {
  left: 181px;
  top: 110px;
}
.stars .star:nth-child(9) {
  left: 253px;
  top: 27px;
}
.stars .star:nth-child(10) {
  left: 257px;
  top: 101px;
}
.show-star.stars {
  opacity: 1;
  transition: all 1s cubic-bezier(.25, .1, .25, 1);
  transition-delay: 1s;
}
.day {
  .stars {
    display: none;
  }
}
@keyframes star {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
</style>