This is the 23rd day of my participation in the First Challenge 2022

introduce

I believe that more than half of the post-90s friends are hot fans, one of the cool pupil surgery is kaleidoscope blood wheel eye, we will use SCSS to make a strengthened version of the kaleidoscope blood wheel eye, just review the project construction of Vite +vue3.

Of course, let’s see how it works.

How do you feel? Did you freak out? As you can see, it splits a lot of graphics, more than the animation, and the position is constantly changing. How does it do this with CSS alone? Next, we need to unlock this effect.

The body of the

1. Build projects

This tutorial will be completed using Vite +vue3+ SCSS, and the codepen demo will be performed using PUG + SCSS at the end. Just borrow VUE3 cut as the default version soon come to kangkang development experience.

After init initialization, install vite, Vue and related tools first.

# 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
Copy the code

Now we can see from package.json that vue is already 3+ by default.

Next, we create viet.config.js, and here we just need to install the Vue plug-in.

import vue from '@vitejs/plugin-vue'
export default {
    server: {
        host: '0.0.0.0'
    },
    plugins: [vue()]
}
Copy the code

Next, we can write index.html, because it’s Vite, so script can use module mode.

<div id="app"></div>
<script type="module" src="./app.js"></script>
Copy the code
// app.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
Copy the code

2. Main container grid

<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>Copy the code

We can introduce the eye component in advance, and then draw a grid background to its parent div as described above, mainly through multiple Linear-gradient to do a few Angle slashes.

3. The kaleidoscope

Now that our theme is finally on the scene, let’s analyze how it makes multiple shapes appear. In fact, it is not troublesome. We can arrange multiple divs around the container through positioning, fill the color with a false element inside, and finally mix the difference through mix-blending-mode :difference. The shape will change naturally.

<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>
Copy the code

As you can see from the above, 18 divs were created. Each div is given a different Angle around it. Then through mix-blx-mode :difference, the whole interface will appear a kaleidoscope effect of fried chicken.

Of course, light can not appear, we also need to add some animation to it, such as its container rotation, round corner contraction or displacement, will be more cool.

.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; }}}}Copy the code

Here the changes can be more arbitrary and may have unexpected effects. Note that move uses left and top instead of translateX and translateY, because some browser kernels like wechat X5 resolve multiple animation nesting bugs, but this is fine in Chrome. Some of the performance was abandoned for better compatibility, and left and top were selected instead of position changes.

conclusion

Codepen I am using puG + SCSS to achieve this effect, online demo.

How does it feel? Is it very simple? You can use mix-Blending-mode :difference to achieve strange effects, SCSS traversal calculation is very easy to use, and Vite + VUe3 to build projects is so convenient. After reading this issue, I do not know whether there is a harvest for you. If you like it, please remember to click on the “like” collection