用一段CSS代码找回属于童年的哆啦A梦欢度六一附源码在线展示

Posted 2021-06-16 JackieDYH

通过 CSS 画一个哆啦A梦，一起找回童年的回忆！

效果图-在线演示-可右键查看完整源码

代码分解

border-radius

允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

开发过程中经常只用一个属性值，例如 border-radius: 10px; 对这个属性了解的同学应该知道，这其实是一个简写，类似 padding: 10px; 他实际上会有**两个维度的半径，一个是水平维度，一个是垂直维度。**他的全写是 border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; / 前的四个值是以左上角为首顺时针对应的四个角的水平半径，而后是垂直半径

哆啦A梦的脸比较特殊，我这边用了两个半圆叠加在一起，把多余的部分遮挡

<div class='doraemon'>
  <!-- 脸部 -->
  <div class='header'></div>
  <div class='face'></div>
</div>

.doraemon {
    width: 100%;
    height: 350px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    background: #5087b8;
    width: 700px;
    height: 350px;
    border-radius: 350px 350px 0 0 / 350px 350px 0 0;
}

.face {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    width: 600px;
    height: 250px;
    background: #fff;
    border-radius: 300px 300px 0 / 225px 225px 0 0;
}

效果 

rotate()

函数定义了一种将元素围绕一个定点（由 transform-origin 属性指定，默认为元素的中心）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。

就是作一个旋转角度用的，其中还分为 rotateY()、rotateX() 作用是让一个元素围绕纵坐标(垂直轴、水平轴)旋转，而不会对其进行变形

因为哆啦A梦的脸比较对称

<div class='eye eye-left'>
  <div class='pupil'>
    <div class='pupil-mask'></div>
    <div class='pupil-middle'></div>
    <div class='pupil-small'></div>
    <div class='tear-top'></div>
    <div class='tear-bottom'></div>
  </div>
</div>
<div class='eye eye-right mirror'>
  <div class='pupil mirror'>
    <div class='pupil-mask'></div>
    <div class='pupil-middle'></div>
    <div class='pupil-small'></div>
    <div class='tear-top'></div>
    <div class='tear-bottom'></div>
  </div>
</div>

.eye {
    position: absolute;
    top: 38px;
    width: 136px;
    height: 136px;
    border-radius: 100px 60px 100px 70px / 100px 60px 100px 70px;
    border: 2px solid #7f888f;
    background: #fff;
}

.eye.eye-left {
    left: 104px;
}

.eye.eye-right {
    right: 104px;
}

.mirror {
    transform: rotateY(180deg);     // 水平翻转
}

box-shadow

属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

哆啦A梦的鼻子做出了立体的效果，这时候就该 box-shadow

/* 依次对应的值为 x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

<div class='nose'>
  <div class='blink'></div>
</div>

.nose {
    position: absolute;
    top: 127px;
    left: 50%;
    transform: translate(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ae3537;
    box-shadow: 2px 30px 18px -8px rgb(0 0 0 / 33%);
}

/* 鼻子上的光 */
.nose .blink {
    position: absolute;
    top: 5px;
    left: 20px;
    width: 36px;
    height: 22px;
    background: #bf5d5c;
    border-radius: 80px 30px 44px 20px / 60px 30px 60px 20px;
}