这是我参与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搭建项目更是如此的便捷。看完本期不知道对你来说是否有收获,喜欢的话记得点赞收藏哦~