通过 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;
}

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

php 邮币卡源码,如何使用CSS的Grid布局实现小松鼠邮票的效果（附源码）
本篇文章给大家带来的内容是关于如何使用CSS的Grid布局实现小松鼠邮票的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源 ...
python模拟火车订票系统代码_Python3.6实现12306火车票自动抢票，附源码
原标题:Python3.6实现12306火车票自动抢票,附源码 Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已 ...
【web开发网页制作】Html+Css网页制作关于我的家乡（6页面）【附源码下载】
[写在前面]之前学生时代自己也做了不少页面,现在毕业后也希望能慢慢的分享出来给大家,希望能给刚接触web开发的你带来一些启发.其实关于网页制作,没有大家想象中的那么难,接下来给大家详细介绍一下如何实现 ...
【HTML | CSS】我用“一行“代码为CSDN博客主页挂上灯笼（附源码）
css3网站代码 html5_让你心动的 HTML5 CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
c语言2048代码linux,C语言2048小游戏课设（附源码）.doc
PAGE PAGE 1 C语言2048小游戏课设项目说明本系统基于C语言开发,适用于刚入门的C语言新手项目课设,开发软件采用VC++6.0开发,VS,DEV C++等均可运行.(书生) 项目运行截 ...
android下载歌词代码,比较完整的android MP3 LRC歌词滚动高亮显示(附源码)
1.以前的滚动只是安行来刷新,现在不是按行来滚动了,其实就是在一定时间内整体往上移动,比如说在1S内刷新10次,由于认得肉眼看起来像是滚动. 关键代码如下: float plus = currentD ...
VC++如何通过代码自动弹出Windows系统的一些窗口（附源码）
VC++常用功能开发汇总(专栏文章列表,欢迎订阅,持续更新...)https://blog.csdn.net/chenlycly/article/details/124272585C++软件异常排查从 ...
怎么让某段css代码只在Chrome 火狐 edge 浏览器生效
上网查了很多方法到现在ie其实已经没有了,所以都是兼容Edge浏览器(win10自带) 截图这段css代码只在火狐生效,其他不生效然后是谷歌和edge 试了很多种 /*只兼容谷歌*/ @medi ...
html直播动画,HTML5 直播疯狂点赞动画实现代码附源码
直播有一个很重要的互动: 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞直播间的所有疯狂点赞,都需要在所有用户界面都我们先来看效果 ...

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

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

代码分解

border-radius

rotate()

box-shadow

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

最新文章

热门文章