vue3+scss开启写轮眼

vue3+scss开启写轮眼

一、相关技术

采用vue3+vite+scss的技术内容进行开发

二、使用步骤

1.安装依赖

代码如下:

javascript 复制代码
npm install sass

2.眼球

首先我们根据需要 将眼睛的基础形状描绘出来,基础形状是由外眼线、内眼线以及中间的瞳孔组成

html 复制代码
<div class="outLine">
    <div class="innerLine">
        <div class="eyeBall"></div>
    </div>
</div>
css 复制代码
//外眼线
.outLine {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: red;
  border: 3px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  //内眼线
  .innerLine {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    border: 3px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
	//瞳孔
    .eyeBall {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #000;
    }
  }
}

3 勾玉

要绘制一个勾玉,先对勾玉的形状进行分析,它是由一个圆和一个勾组成,因此我们可以使用css中的伪类来实现

定义一个div,类名为gouyu

typescript 复制代码
<template>
    <div class="gouyu"></div>
</template>

<style lang="scss" scoped>
//默认圆
.gouyu {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 12px;
}
//添加勾
.gouyu:before {
  position: absolute;
  content: "";
  width: 12px;
  height: 10px;
  left: 2px;//左偏移量
  top: -6px;//上偏移量
  border: 0 solid transparent;//取消其余边框
  border-top: 6px solid #000000;//上边框
  border-radius: 20px 0 0 0;//上边框圆角
  transform: rotate(77deg);//勾旋转角度
}

4 旋转动画

要实现勾玉绕瞳孔旋转的效果,我们可以使用css3中的动画实现

css 复制代码
.gouyu {
  transform: rotate(0deg);//默认开始位置
  transform-origin: 50% 36px;//旋转中心,如不设置默认自旋转
  animation: 3s gouyuRotate-1850a03c linear infinite;//执行动画的时间,事件,无限次数
}
@keyframes gouyuRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(0deg));
  }
}

5 综合

结合二者即可实现以下效果,源代码在此

相关推荐
慧一居士38 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead40 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app