画一只会动的皮卡丘（上）

最新推荐文章于 2024-05-05 02:00:04 发布

王噶一啊一

最新推荐文章于 2024-05-05 02:00:04 发布

阅读量5.2k

点赞数 2

分类专栏：前端实战项目文章标签： html css js

本文链接：https://blog.csdn.net/weixin_46498102/article/details/107348414

版权

前端实战项目专栏收录该内容

15 篇文章 2 订阅

订阅专栏

实现的皮卡丘样式如下图：

本篇内容List：

tip1--全局样式初始化，配置
tip2--实现鼻子
tip3--实现眼睛
tip4--实现脸颊
tip5--嘴巴实现

在这里插入图片描述

1.先进行页面整体的样式配置

这里我们要在手机端展示，所以我们尽量整个图形的宽度要小于手机屏幕的最小宽度，代码如下：

   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    //设置body样式使内容居中等
    body {
      width: 100%;
      height: 100vh;
      background-color: yellow;
      border: 1px solid green;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    //为我们需要画图的主体区域
    .wrapper {
      width: 100%;
      height: 220px;
      position: relative;
    }

2.鼻子的绘画

利用一个div盒子宽高等于0，然后给予边宽来撑大盒子，再取消不需要的边框，就可以实现一个圆饼的效果，代码如下

.nose {
      width: 0;
      height: 0;
      border: 11px solid red;
      border-radius: 12px;
      border-color: black transparent transparent transparent;
      position: absolute;
      left: 50%;
      top: 28px;
      transform: translate(-12px);
    }

3.眼睛的绘画

我们把相同的眼睛代码写在一个class中，左右眼不同的样式分别写类名来控制，在测量的时候我们可以以最中间的鼻子基准来写代码，代码如下；

 .eye {
      width: 49px;
      height: 49px;
      background-color: #2E2E2E;
      border-radius: 50%;
      position: absolute;
      border: 2px solid #000;
    }
    .eye::before {
      content: '';
      display: block;
      width: 24px;
      height: 24px;
      background-color: white;
      position: absolute;
      border-radius: 50%;
      left: 6px;
      top: -1px;
      border: 2px solid #000;
    }
    .eye.left {
      right: 50%;
      margin-right: 90px
    }
    .eye.right {
      left: 50%;
      margin-left: 90px
    }

3.脸颊的绘画

脸颊的绘画不难，我们需要准确测量位置，代码如下：

    .face {
      width: 65px;
      height: 68px;
      background-color: #f92726;
      border: 2px solid black;
      border-radius: 50%;
      position: absolute;
      top: 85px;
    }
    .face.left {
      right: 50%;
      margin-right: 116px;
    }
    .face.right {
      left: 50%;
      margin-left: 116px;
    }

4.嘴的绘画

为了实现舌头，结构图如下；

在这里插入图片描述

代码如下：

.upperLip {
      height: 20px;
      width: 80px;
      border: 3px solid black;
      position: absolute;
      top: 52px;
      background-color: yellow;
      z-index: 1;
    }
  .upperLip.left {
      
      border-bottom-left-radius: 40px 20px;
      border-top: none;
      border-right: none;
      transform: rotate(-20deg);
      right: 50%;
  }
  .upperLip.right {
      left: 50%;
      border-bottom-right-radius: 40px 20px;
      border-top: none;
      border-left: none;
      transform: rotate(20deg);
  }
  .lowerLip-wrapper {
      width: 120px;
      height: 130px;
     
      position: absolute;
      left: 50%;
      margin-left: -60px;
      margin-top: 56px;
      overflow: hidden;
  }
  .lowerLip {
      height: 1000px;
      width: 120px;
      border-radius: 200px/800px;
      border: 2px solid black;
      background-color: #971818;
      position: absolute;
      bottom: 0;
      overflow: hidden
  }
  .tongue {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      left: 8px;
      background-color: #f95364;
      position: absolute;
      bottom: 0;
      z-index: 2;
  }

以上就可实现一个皮卡丘了，现附上整个静态皮卡丘代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      width: 100%;
      height: 100vh;
      background-color: yellow;
      border: 1px solid green;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper {
      width: 100%;
      height: 220px;
     
      position: relative;
    }
    .nose {
      width: 0;
      height: 0;
      border: 11px solid red;
      border-radius: 12px;
      border-color: black transparent transparent transparent;
      position: absolute;
      left: 50%;
      top: 28px;
      transform: translate(-12px);
    }
    .eye {
      width: 49px;
      height: 49px;
      background-color: #2E2E2E;
      border-radius: 50%;
      position: absolute;
      border: 2px solid #000;
    }
    .eye::before {
      content: '';
      display: block;
      width: 24px;
      height: 24px;
      background-color: white;
      position: absolute;
      border-radius: 50%;
      left: 6px;
      top: -1px;
      border: 2px solid #000;
    }
    .eye.left {
      right: 50%;
      margin-right: 90px
    }
    .eye.right {
      left: 50%;
      margin-left: 90px
    }
    .face {
      width: 65px;
      height: 68px;
      background-color: #f92726;
      border: 2px solid black;
      border-radius: 50%;
      position: absolute;
      top: 85px;
    }
    .face.left {
      right: 50%;
      margin-right: 116px;
    }
    .face.right {
      left: 50%;
      margin-left: 116px;
    }
    .upperLip {
      height: 20px;
      width: 80px;
      border: 3px solid black;
      position: absolute;
      top: 52px;
      background-color: yellow;
      z-index: 1;
    }
    .upperLip.left {
      
      border-bottom-left-radius: 40px 20px;
      border-top: none;
      border-right: none;
      transform: rotate(-20deg);
      right: 50%;
    }
    .upperLip.right {
      left: 50%;
      border-bottom-right-radius: 40px 20px;
      border-top: none;
      border-left: none;
      transform: rotate(20deg);
    }
    .lowerLip-wrapper {
      width: 120px;
      height: 130px;
     
      position: absolute;
      left: 50%;
      margin-left: -60px;
      margin-top: 56px;
      overflow: hidden;
    }
    .lowerLip {
      height: 1000px;
      width: 120px;
      border-radius: 200px/800px;
      border: 2px solid black;
      background-color: #971818;
      position: absolute;
      bottom: 0;
      overflow: hidden
    }
    .tongue {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      left: 8px;
      background-color: #f95364;
      position: absolute;
      bottom: 0;
      z-index: 2;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="nose">
  </div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="face left"></div>  
  <div class="face right"></div>
  <div class="upperLip left"></div>
  <div class="upperLip right"></div>
  <div class="lowerLip-wrapper">
    <div class="lowerLip">
      <div class="tongue"></div>
    </div>
  </div>
</div>
</body>
</html>

王噶一啊一

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
画一只会动的皮卡丘（上）

实现的皮卡丘样式如下图：本篇内容List：tip1--全局样式初始化，配置tip2--实现鼻子tip3--实现眼睛tip4--实现脸颊tip5--嘴巴实现1.先进行页面整体的样式配置这里我们要在手机端展示，所以我们尽量整个图形的宽度要小于手机屏幕的最小宽度，代码如下： * { margin: 0; padding: 0; box-sizing: border-box; } *::before { margin: 0;
复制链接

扫一扫

专栏目录