程序员也要kiss kiss——用一个小demo教你怎么开始切页面

Yiko2023-11-03 14:01

话不多直接说先上效果：

引言

当我们开始学习前端的时候，我们遇到的第一件事就是先学会切图，切页面，把一个能看到的做成自己的，所见即所得就是我们的首要目标，接下来我就会一步一步带大家从第一步的构思，到框架，再到样式，最后添加动画来学习。通过建立这样的一个前端编程思维，让你轻松踏上切页面之旅~

第一步：构思

我们现在拿到了这样一个小demo，我们首先要透过皮相看骨相:

  • 这个小demo无非就是两个小圆，所以我们会需要两个div并且之后添加圆角，其实应该画两个方框，但是便于大家理解我就先把它画成圆
  • 再往下就是每个小圆都有一个脸
  • 然后加上眼睛嘴巴和两个小腮红

然后我们就看透了它的整体结构到底是怎么样的，只是因为我们还没有添加样式，所以看着好像差别很大，别着急我们慢慢来，接下来我们就开始把这个结构的框架写出来。

第二步：写框架

  • 首先是这两个div，它们是居中的，我们如果一个个让它们定位比较麻烦，所以我们先写一个大div来放它们：
html 复制代码 
<div class="cotainer">
    <div class="ball ball-l">
    </div>
    <div class="ball ball-r">
    </div>
</div>

这样我们就在cotainer里放上了左头和右头

  • 然后是放上一个div作为脸
html 复制代码 
<div class="cotainer">
    <div class="ball ball-l">
      <div class="face face-l">
      </div>
    </div>
    <div class="ball ball-r">
      <div class="face face-r">
      </div>
    </div>
  </div>

这样我们就在左头和右头里放上了脸

  • 然后就是眼睛、嘴和小腮红啦
js 复制代码 
<div class="cotainer">
    <div class="ball ball-l">
      <div class="face face-l">
        <div class="eye-l eye-ll"></div>
        <div class="eye-l eye-lr"></div>
        <div class="mouth"></div>
      </div>
    </div>
    <div class="ball ball-r">
      <div class="face face-r">
        <div class="eye-r eye-rl"></div>
        <div class="eye-r eye-rr"></div>
        <div class="mouth mouth-r"></div>
        <div class="kiss">
          <div class="halfmouth halfmouth-s"></div>
          <div class="halfmouth halfmouth-x"></div>
        </div>
      </div>
    </div>
  </div>

这样把眼睛嘴放好，当然你会发现诶？腮红怎么不见了，多出来一个kiss是什么？作为一个练习小demo，我们再用点新东西不过分吧，我们待会直接用伪元素来完成。而kiss是因为我们待会动画得用到，正常我们是在做动画的时候才添加的，我现在先加上吧~

附上完整html：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="cotainer">
    <div class="ball ball-l">
      <div class="face face-l">
        <div class="eye-l eye-ll"></div>
        <div class="eye-l eye-lr"></div>
        <div class="mouth"></div>
      </div>
    </div>
    <div class="ball ball-r">
      <div class="face face-r">
        <div class="eye-r eye-rl"></div>
        <div class="eye-r eye-rr"></div>
        <div class="mouth mouth-r"></div>
        <div class="kiss">
          <div class="halfmouth halfmouth-s"></div>
          <div class="halfmouth halfmouth-x"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

第三步 添加样式

一些简单的样式我这里就不一一说了，除去一些正常的简单样式之外，我在提几点样式设计：

嘴和眼睛这种月牙儿的形状我们要怎么用css实现呢？

其实很简单，你如果把月牙儿拉直，其实它就是一个比较粗的边框！我们在添加个圆角，你就会神奇的发现，月牙儿出来了：

css 复制代码 
  border-bottom: 5px solid #000;
  border-radius: 50%;

只要为嘴或者眼睛的样式中这样添加就可以实现了，嘴向上弯就是border-bottom,眼睛向下弯那不就是border-top嘛！

其它的就较为简单我们只需要按照这个大的html框架去一块一块写样式就可以了~

附上完整css：

css 复制代码 
body {
  background-color: #78e08f;
  margin: 0;
}

.cotainer {
  width: 232px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*border:1px solid #000;*/
}

/* 头 */
.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 8px solid #000;
  background-color: #fff;
  position: absolute;
}

.ball-l {
  left: 0px;
  z-index: 10;
}

.ball-r {
  right: 0px;
}

/* 脸 */
.face-l {
  width: 70px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 30px;
}

.face-r {
  width: 70px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 30px;
}

/* 眼睛 */
.eye-l {
  width: 15px;
  height: 14px;
  border-bottom: 5px solid #000;
  border-radius: 50%;
  position: absolute;
}

.eye-r {
  width: 15px;
  height: 14px;
  border-top: 5px solid #000;
  border-radius: 50%;
  position: absolute;
}

.eye-ll {
  left: 10px;
}

.eye-lr {
  right: 5px;
}

.eye-rl {
  left: 10px;
}

.eye-rr {
  right: 5px;
}

/* 嘴 */
.mouth {
  width: 30px;
  height: 14px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -5px;
  border-bottom: 5px solid #000;
  border-radius: 50%;
}

/* kiss形嘴 */
.kiss {
  width: 30px;
  height: 15px;
  /*border: 1px solid #000;*/
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -5px;
  transform: rotate(90deg);
  opacity: 0;
}

.halfmouth {
  width: 14px;
  height: 15px;
  border-bottom: 5px solid #000;
  border-radius: 50%;
  position: absolute;
}

.halfmouth-s {
  left: 1px;
}

.halfmouth-x {
  right: 1px;
}

/* 腮红部分 */
.face-l::before {
  content: '';
  width: 18px;
  height: 8px;
  border-radius: 50%;
  background-color: #badc58;
  position: absolute;
  right: -8px;
  top: 20px;
}

.face-l::after {
  content: '';
  width: 18px;
  height: 8px;
  border-radius: 50%;
  background-color: #badc58;
  position: absolute;
  left: -5px;
  top: 20px;
}

.face-r::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #badc58;
  position: absolute;
  right: -8px;
  top: 20px;
}

.face-r::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #badc58;
  position: absolute;
  left: -5px;
  top: 20px;
}

第四步 添加动画

这个基础入门小demo我们直接使用css就可以完成它的动画效果，让我们一起来看看吧~

首先左脸部分：

我们的左脸应该是先向右边移动，然后停下，脸左右旋转产生蹭蹭的效果，理念存在实践开始：

css 复制代码 
/* 左脸靠近 */
.ball-l {
  animation: close 4s ease infinite;
}

@keyframes close {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(20px);
  }

  35% {
    transform: translate(20px);
  }

  55% {
    transform: translate(0);
  }

  100% {
    transform: translate(0);
  }
}

/* 左脸蹭蹭 */
.face-l {
  animation: ceng 4s ease infinite;
}

@keyframes ceng {
  0% {
    transform: translate(0) rotate(0);
  }

  10% {
    transform: translate(0) rotate(0);
  }

  20% {
    transform: translate(5px) rotate(-2deg);
  }

  28% {
    transform: translate(0) rotate(0);
  }

  35% {
    transform: translate(5px) rotate(-2deg);
  }

  50% {
    transform: translate(0) rotate(0);
  }

  100% {
    transform: translate(0) rotate(0);
  }
}

我们分别对头和脸添加了动画，然后处理一下时间区间，就很轻松实现了左脸靠近蹭蹭的效果，效果安排：

右脸部分

右脸部分我们会发现，我们的右脸需要在左脸靠近的时候微微抬头然后低头，做出被蹭的效果，然后我们的右脸需要靠近我们的左脸，并且嘴变成kiss的形状然后回来。

我们这里就引入一下这个嘴的设计，我们其实是不会这样直接变形的，但我们可以"曲线救国"，直接先隐藏kiss，动画过程中隐藏嘴然后显示kiss，这样我们就可以实现嘴变kiss了！具体隐藏我用的是渐变。直接开始上代码：

css 复制代码 
/* 右脸靠近+被蹭微微抬头+低头kiss */
.ball-r {
  animation: close-r 4s ease infinite;
}

@keyframes close-r {
  0% {
    transform: translate(0) rotate(0);
  }

  50% {
    transform: translate(0) rotate(10deg);
  }

  60% {
    transform: translate(-30px) rotate(-10deg);
  }

  80% {
    transform: translate(-30px);
  }

  100% {
    transform: translate(0);
  }
}

/* 嘴旋转加渐变隐藏 */
.mouth-r {
  animation: rotate 4s ease infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
    opacity: 1;
  }

  50% {
    transform: rotate(0);
    opacity: 1;
  }


  60% {
    transform: rotate(90deg);
    opacity: 0;
  }

  80% {
    transform: rotate(90deg);
    opacity: 0;
  }

  81% {
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform: rotate(0);
    opacity: 1;
  }
}

/* 嘴kiss渐变出现 */
.kiss {
  animation: kiss 4s ease infinite;
}

@keyframes kiss {
  0% {
    opacity: 0;
    transform: rotate(90deg);
  }

  50% {
    opacity: 0;
    transform: rotate(90deg);
  }

  60% {
    opacity: 1;
    transform: rotate(90deg);
  }

  80% {
    opacity: 1;
    transform: rotate(90deg);
  }

  81% {
    opacity: 0;
    transform: rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: rotate(0);
  }
}

然后你只需要把这些代码整合一下就可以得到我们最开始给出来完整的的效果啦：

这就是这个小demo的全部内容啦，是不是感觉很简单~ 遇到了问题可以直接评论区回复，鼠鼠我呀看到了的话会第一时间回复你的~ 实现了的话也可以在评论区交作业，看看大家完成的怎么样~

总结

在我们在之后的切页面之中，我们也可以就跟着这样的一个逻辑去走，一步步去把一个大的页面分割成小块，然后一步步对每一块进行设计，一步步对每一块添加样式，动画，就可以一步步完成我们的页面了~

那么这篇文章就到这里结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多~

相关推荐
一个很帅的帅哥8 分钟前
axios(基于Promise的HTTP客户端) 与 `async` 和 `await` 结合使用
javascript·网络·网络协议·http·async·promise·await
dream_ready1 小时前
linux安装nginx+前端部署vue项目（实际测试react项目也可以）
前端·javascript·vue.js·nginx·react·html5
编写美好前程1 小时前
ruoyi-vue若依前端是如何防止接口重复请求
前端·javascript·vue.js
flytam1 小时前
ES5 在 Web 上的现状
前端·javascript
喵喵酱仔__1 小时前
阻止冒泡事件
前端·javascript·vue.js
GISer_Jing1 小时前
前端面试CSS常见题目
前端·css·面试
某公司摸鱼前端1 小时前
如何关闭前端Chrome的debugger反调试
javascript·chrome
八了个戒1 小时前
【TypeScript入坑】什么是TypeScript？
开发语言·前端·javascript·面试·typescript
不悔哥1 小时前
vue 案例使用
前端·javascript·vue.js
anyup_前端梦工厂2 小时前
Vuex 入门与实战
前端·javascript·vue.js
热门推荐
01CCF-CSP认证考试 202406-3 文本分词 100分题解02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04实战 | 基于YOLOv9和OpenCV实现车辆跟踪计数（步骤 + 源码）05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【数据分享】1961—2022年全国范围的逐日降水栅格数据08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10软件工程从理论到实践客观题汇总(头歌第一章至第八章)