likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 38

话不多直接说先上效果：

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

引言

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

第一步：构思

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

  • 这个小demo无非就是两个小圆，所以我们会需要两个div并且之后添加圆角，其实应该画两个方框，但是便于大家理解我就先把它画成圆

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

  • 再往下就是每个小圆都有一个脸

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

  • 然后加上眼睛嘴巴和两个小腮红

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

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

第二步：写框架

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

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

  • 然后是放上一个div作为脸
<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>

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

  • 然后就是眼睛、嘴和小腮红啦
<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：

<!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实现呢？

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

  border-bottom: 5px solid #000;
  border-radius: 50%;

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

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

附上完整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就可以完成它的动画效果，让我们一起来看看吧~

首先左脸部分：

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

/* 左脸靠近 */
.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——用一个小demo教你怎么开始切页面

右脸部分

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

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

/* 右脸靠近+被蹭微微抬头+低头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);
  }
}

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

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

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

总结

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

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

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

转载自:https://juejin.cn/post/7296801242793230362
评论
请登录