Vue3 画一只可爱的鸭子

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

概述

今天让我们用 Vue3 一起来画一只可爱的鸭子。如果觉得我写的不错欢迎给我点赞评论。

项目初始化

首先我们新建一个项目，执行如下命令

pnpm create vite vue-duck

选择 vue ，接着选择 vue-ts ，回车，等待项目安装完成， cd 进入项目根目录下，接着安装项目需要的依赖包

pnpm install

安装完成后，我们启动项目

pnpm run dev

控制台输出如下内容

vite v2.9.10 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 353ms.

说明项目正常启动了，下面我们接着开发

可爱的小鸭

删除项目多余的文件，我们新建一个组件 src/components/duck.vue, 并将这个组件引入到 App.vue 中, 代码如下：

• src/components/duck.vue

<template>
  <div class="duck"></div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

• App.vue

<template>
  <Duck />
</template>
<script setup lang="ts">
import Duck from './components/duck.vue'
</script>

我们用 CSS 画的这只小鸭由头部，脖子，身躯，腿，尾巴组成，我们分部完成，一步一步来实现

首先我们来确定小鸭的身躯

• HTML

<div class="duck-box">
    <div class="duck-container">
        <div class="duck-body"></div>
    </div>
</div>

• CSS

.duck-box{
    background-color: #e5e5e5;
}
.duck-container{
    height: 400px;
    width: 400px;
    position: relative;
    margin: 0 auto;
}
.duck-body{
    position: absolute;
    top: 135px;
    height: 120px;
    width: 240px;
    border-radius: 0 0 120px 120px;
    background-color:  #c3d3e4;
}

• 腿和尾巴

<div class="duck-legs"></div>

.duck-body:after{
    content: "";
    height: 20px;
    width: 30px;
    background-color: #998378;
    border-radius: 0 0 0 20px;
    z-index: -1;
    position: absolute;
    left: -26px;
    transform: translateZ(-10px);
}
.duck-legs{
    height: 40px;
    width: 10px;
    background-color: #e9a52a;
    position: absolute;
    top: 255px;
    left: 110px;
}
.duck-legs:after{
    content: "";
    height: 15px;
    width: 30px;
    background-color: #e9a52a;
    border-radius: 0 15px 0 0;
    position: absolute;
    bottom: 0;
}

• 鸭脖

<div class="duck-neck"></div>

.duck-neck{
    position: absolute;
    top: 46px;
    left: 235px;
    height: 120px;
    width: 60px;
    border-radius: 0 100px 100px 0;
    background-image: radial-gradient(circle at left center, #f9f8f8, #f9f8f8 33.333%, #88abc3 33.333%, #88abc3 52.666%, #aac3df 6.666%, #aac3df);
}

• 头部

下来是小鸭子的头部，头部完成后，我们的小鸭子也就画完了

<div class="duck-head"></div>

.duck-head{
    position: absolute;
    top: 32.5px;
    left: 235px;
    overflow: hidden;
    height: 50px;
    width: 150px;
    border-radius: 15px 0 50px;
    background-image: linear-gradient(to right, #c2d7e2, #c2d7e2 25%, #f1c066 25%, #f1c066);
}
.duck-head::after{
    content: "";
     height: 10px;
    width: 10px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 25%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 5px #6c5a5b;
}

画一个小鸭子很简单，但是在画的这个过程中，我们对 linear-gradient 这个属性又有了新的认识，如果这个属性用的好，可以达到很多意想不到的效果。