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

￡神魔★判官ぃ 2022-10-17 04:12 183阅读 0赞

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

# 效果图-[在线演示][Link 1]\-可右键查看完整源码 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70][]

# 代码分解 #

## border-radius ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 1][]

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

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

.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;
    }

**效果 **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 2][]

## rotate() ##

> 函数定义了一种将元素围绕一个定点（由 `transform-origin` 属性指定，默认为元素的中心）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。
> 
> 就是作一个旋转角度用的，其中还分为 `rotateY()`、`rotateX()` 作用是让一个元素围绕纵坐标(垂直轴、水平轴)旋转，而不会对其进行变形

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

.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);     // 水平翻转
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 3][]

## box-shadow ##

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

> 哆啦A梦的鼻子做出了立体的效果，这时候就该 `box-shadow`
> 
>     /* 依次对应的值为 x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
>     box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

.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;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 4][]

[Link 1]: https://jackiedyh.github.io/DemoTest/%E6%A1%88%E4%BE%8B%E6%B5%8B%E8%AF%95/%E6%A1%88%E4%BE%8B-css-%E5%93%86%E5%95%A6A%E6%A2%A6.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70]: /images/20221014/039bc2cc534d4185a6e2b62b2df6e31d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 1]: /images/20221014/458c5b0fd8d0453585f829f5dda74714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 2]: /images/20221014/f4c13d2fd9924130bfc713c7ca3db110.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 3]: /images/20221014/096b77fd0e764f979a5a6a43b651b955.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 4]: /images/20221014/aff7289e7abf4166abdda18551995451.png