【火影专场】vite+vue3+scss解锁炒鸡万花筒血轮眼

这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战

介绍

相信90后一大半的小伙伴都是火影迷，其中有个炒鸡酷炫的瞳术就是万花筒血轮眼，我们本期就用通过scss搞出个加强版的万花筒血轮眼，正好复习下vite+vue3的项目搭建。

当然，我们先康康这个效果怎么样吧。

感觉怎么？有没有被吓到？可以观察到，它分裂好多图形，比动画版的写轮眼还要多，而且位置不断发生这变化，那它是如何仅用css完成的呢，接下来，我们就要去解锁这个效果了。

正文

1.搭建项目

本期项目讲解将用vite+vue3+scss完成，而且结尾处codepen演示将用pug+scss来表现的。正好借vue3切为默认版本不久就来康康开发体验吧。

init初始化后，先来安装一下vite，vue和相关工具。

# NPM
npm i -D vite sass sass-loader @vitejs/plugin-vue
npm i -S vue
# YARN
yarn add -D vite sass sass-loader @vitejs/plugin-vue
yarn add vue
复制代码

现在我们通过package.json发现vue果然已经默认成了3+版本了。

接下来，我们创建vite.config.js，这里只要安装vue插件就好。

import vue from '@vitejs/plugin-vue'
export default {
    server: {
        host: '0.0.0.0'
    },
    plugins: [vue()]
}
复制代码

接下来，我们就可以写index.html，因为是vite，所以script可以用的module模式。

<div id="app"></div>
<script type="module" src="./app.js"></script>
复制代码

// app.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
复制代码

2.主容器网格

<template>
  <div class="main-bg">
    <CopyEye />
  </div>
</template>

<script setup>
import CopyEye from "./components/CopyEye.vue";
</script>

<style lang="scss" scoped>
  .main-bg {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    $line-color:rgba(143, 87, 248, .1);
    $line-bg:rgba(255, 255, 255,1);
    background-image: linear-gradient(
        90deg,
        $line-bg 0%,
        transparent 0%
      ),
      repeating-linear-gradient(
        45deg,
        $line-color 0px,
        $line-color 1px,
        transparent 1px,
        transparent 16px
      ),
      repeating-linear-gradient(
        90deg,
        $line-color 0px,
        $line-color 1px,
        transparent 1px,
        transparent 16px
      ),
      repeating-linear-gradient(
        135deg,
        $line-color 0px,
        $line-color 1px,
        transparent 1px,
        transparent 16px
      ),
      linear-gradient(0deg, $line-bg, $line-bg);
  }
</style>
复制代码

我们就可以预先把眼睛组件引入进去，再到其父级div画一个网格背景如以上代码，主要通过多重linear-gradient做了几个角度的斜线来完成。

3.万花筒

我们的主题终于要登场了，先来分析一下它是如何做到多个图形出现的吧。其实，并不麻烦，我们可以通过定位，做好多个div绕着容器排列，内部用一个伪元素去填充颜色，最后通过mix-blend-mode:difference做差异混合。图形就自然而然的变化出来。

<template>
  <div class="copy-eye">
    <div v-for="item in 18" :key="item"></div>
  </div>
</template>

<style lang="scss" scoped>
@use "sass:math";
$num: 18;
.copy-eye {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background-color: rgb(12, 11, 11);
  & > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left;
    mix-blend-mode: difference;
    @for $i from 1 through $num {
      &:nth-child(#{$i}) {
        transform: translateX(50%) rotate(#{math.div(360, 18) * ($i - 1)}deg);
      }
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      background: rgb(238, 74, 74);
    }
  }
}
</style>
复制代码

通过以上可以看出，创建了18个div。每个div又赋予了不同的角度围绕四周。再通过mix-blend-mode:difference整个界面就出现了炒鸡万花筒的效果。

当然，光出现不行，我们还要给其追加一点动画，比如说其容器旋转，圆角收缩或者位移，会显得更加炫酷。

.copy-eye {
  animation: rotate 60s linear infinite;
  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }
  & > div {
    &::before {
      animation: radius 2s ease alternate infinite,
        move 5s linear alternate infinite;
    }
    @keyframes radius {
      0% {
        border-radius: 30%;
      }
      100% {
        border-radius: 10%;
      }
    }
    @keyframes move {
      0% {
        left: -50px;
        top: -20px;
      }
      100% {
        left: 50px;
        top: 20px;
      }
    }
  }
}
复制代码

这里变化可以更加随意，或许有意想不到的效果产生。但是要注意，move这里用到了left和top,而非translateX和translateY，原因是一些浏览器内核比如微信的X5解析多重动画嵌套有时候会产生BUG，但再chrome浏览器下没有问题的。为了兼容更好就放弃了部分性能，选了left和top去代替位置变化。

结语

codepen上我是通过pug+scss实现的这个效果，在线演示。

感觉怎样，是不是非常的简单，用mix-blend-mode:difference就可以实现千奇百怪的效果，scss遍历计算也是非常好用，还有vite+vue3搭建项目更是如此的便捷。看完本期不知道对你来说是否有收获，喜欢的话记得点赞收藏哦~