「更多福利资讯查看:2024 首次大厂挑战」。

`



....

`

.bowl_wrap{ width: 200px; height: 220px; margin: 100px auto; position: relative; }

先画一个碗,这个碗呢我是分 3 个部分组合起来的,在一个圆的上半部分放一个椭圆,下面放一个 div,都是通过 border-radius 进行形状的改变

<!-- 碗底 --> <div class="bowl_bottom"></div> <div class="bowl_body_wrap"> <!-- <div class="text">汤圆节快乐!</div> --> </div> <!-- 碗口 --> <div class="bowl_rim"> ... </div>

.bowl_rim{ position: absolute; top: 0px; width: 200px; height: 135px; background-color: rgb(247, 242, 235); border: 2px solid black; border-radius: 50% / 50%; overflow: hidden; } .bowl_bottom{ position: absolute; top: 196px; left: 65px; width: 70px; height: 15px; background-color: rgb(247, 242, 235); border-radius: 0% 0% 80% 80%; border: 2px solid black; border-top: 0px solid black; } .bowl_body_wrap{ position: absolute; width: 200px; height: 200px; background-color: rgb(247, 242, 235); border: 2px solid black; border-radius: 67% 68% 61% 62% / 48% 45% 86% 88% ; } .text{ margin-left: 60px; margin-top: 160px; color: w; }

然后我们就开始制作汤圆,把它放进碗里(bowl_rim),超出的地方隐藏起来,汤圆的表情与很多,可以把每一个汤圆的表情都改变,我这个偷了个懒,都用的同一个

<div class="bowl_rim"> <div class="two"> <div class="left_eye"></div> <div class="right_eye"></div> <div class="mouth"> <div class="circle1"></div> <div class="circle2"></div> </div> <div class="left_blusher"><div class="blu1"></div><div class="blu2"></div></div> <div class="right_blusher"><div class="blu1"></div><div class="blu2"></div></div> </div> </div>

汤圆的背景颜色可以根据自己的喜好更改,这里是黄色的(大黄豆皮~)

这个嘴巴就是用两个椭圆 div 旋转后,隐藏上半部分得到的

` .one, .two, .three, .four{

position: absolute;

top:45px;

left: 0px;

width: 95px;

height: 80px;

border: 2px solid black;

background-color: #fff;

border-radius: 67% 68% 52% 56% / 67% 79% 55% 57% ;

}

.two{

background-color: yellow;

top: 0px;

left: 60px;

z-index: 10s;

}

.left_eye, .right_eye{

position: absolute;

top: 20px;

left: 20px;

width: 16px ;

height: 3px;

background-color: black;

}

.right_eye{

left: 60px;

}

.left_blusher, .right_blusher{

width: 20px ;

height: 15px;

background-color: pink;

border-radius: 50% / 50%;

position: absolute;

top: 30px;

left: 5px;

}

.right_blusher{

left: 68px;

}

.blu1, .blu2{

width: 2px;

height: 8px;

background-color: #fff;

position: absolute;

left: 6px;

top: 4px;

transform: rotate(20deg);

}

.blu2{

left: 12px;

}

    .mouth{
position: absolute;
top: 20px;
left: 38px;
width: 20px;
height: 20px;
overflow: hidden;
}
.mouth .circle1, .mouth .circle2{
margin-top: -10px;
width: 6px;
height: 16px;
border-radius: 50% / 50%;
border: 2px solid black;
transform: rotate(10deg);
}
.mouth .circle2{
margin-left: 8px;
margin-top: -20px;
transform: rotate(-10deg);
}`

马上就要元宵节了,这里给大家用css端上一碗汤圆的更多相关文章

  1. 工作中的开发过程(Javaweb路线,写给刚刚实习或者马上就要工作的朋友)

    工作中的开发过程(Javaweb路线,写给刚刚实习或者马上就要工作的朋友) 当我还没开始工作的时候,我是对实际项目开发流程充满未知和向往的,当时很希望能够有一个过来人,给我介绍一下实际工作起来是什么样 ...

  2. 今天花了好长的时间终于把SecureCRT安装成功了 现在分享给大家 安装的步骤, 希望对大家用帮助

    转载地址:https://www.cnblogs.com/lianghe01/p/6618651.html 今天花了好长的时间终于把SecureCRT安装成功了 现在分享给大家 安装的步骤, 希望对大 ...

  3. 主站sinox.org堵塞太厉害,大家用sinox.3322.org訪问

    近期 www.sinox.org域名堵塞太厉害了.差点儿不能訪问,如今大家用sinox.3322.org訪问 sinox.org仅仅是显示正在建设 一直以来sinox.org仅仅是个摆设,并非主要域名 ...

  4. 各大浏览器CSS Hack收集

    各大浏览器CSS Hack收集  >>>>>>>>>>>>>>>>>>>>> ...

  5. 测试pc大、小端

    判断计算机的大.小端存储方式 1 int main() { ; char* p=(char*)&a; ) printf("little\n");//小端存储:高位存在地地址 ...

  6. FtpClient上传文件速度非常慢,而且大小为0,上传失败

    问题发生: 环境:VSFTP+FTPClient+Client 使用FTPClient上传文件的时候总是卡住,而且文件大小为0,上传失败, 解决方案: 添加代码:调用FTPClient的enterLo ...

  7. 新软件马上就要完成了,先发篇文章YY下

    最近一直都在搞网站抓取方面的开发,闲着无聊逛逛论坛,发现有些帖子还是写的相当不错的,只是一篇一篇的点进去比较麻烦,于是就写了个小软件只是为了方便查看博客园和CSDN上的优秀文章.其实这个还可以拓展的, ...

  8. 樱花的季节,教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  9. 【苹果通知APNs】不知道大家用过PushSharp没?

    好久没写东西了,近期在研究Jenkins,大家有兴趣可以一起来玩玩交流,学习DevOps还是蛮重要. 近期我负责的项目里需要APNs的通知,这个自己单独开发还是蛮费功夫,故用了第三方开源的PushSh ...

  10. 带大家用40行python代码实现一个疫情地图

    最近两个月,因为新冠病毒无情的肆虐,相信会给每个中国人的记忆中画上重重的一笔.到今天为止,疫情形势依然十分严峻,虽然除湖北外的其他省份已经连续十一天确诊人数下降,但是接下来还有将近至少1.6亿的人口迁 ...

随机推荐

  1. Jrebel与Xrebel教学

    简介 JRebel和XRebel是两个非常有用的工具,可以显著提升Java开发人员的生产力和应用程序性能. JRebel是一个强大的Java开发工具,它允许开发人员在不重新启动应用程序的情况下进行代码 ...

  2. [转帖]优化超大 Nginx 配置导致的内存碎片

    https://blog.openresty.com.cn/cn/ngx-cycle-pool-frag/?src=org_news 章亦春发布于 Feb 14, 2023更新于 Mar 2, 202 ...

  3. [转帖]深入理解Redis的scan命令

    熟悉Redis的人都知道,它是单线程的.因此在使用一些时间复杂度为O(N)的命令时要非常谨慎.可能一不小心就会阻塞进程,导致Redis出现卡顿. 有时,我们需要针对符合条件的一部分命令进行操作,比如删 ...

  4. Linux下面sysstat的安装与简介

    https://blog.51cto.com/smoke520/2160073   在Linux系统下获取sysstat-10.0.5.tar.gz的两种方式: 方式一: 下载sysstat-10.0 ...

  5. awk中的NR,FNR ,NF,$NF,RS,ORS,FS,OFS

    awk中的NR,FNR ,NF,$NF,RS,ORS,FS,OFS https://www.cnblogs.com/zhangqingsh/archive/2013/04/24/3040801.htm ...

  6. IIS 实现autoindex的简单方法 能够下载文件等.

    之前使用nginx 的autoindex on 的参数 能够实现了 nginx的 目录浏览查看文件 但是那是linux上面的 windows 上面很多 使用的 其实是 iis的居多 然后看了下 其实也 ...

  7. Linux平台下面部署node npm 等工具软件

    公司这边用到了运行时定制, 用的是angular 开发的. 所以需要在linux 里面安装 angular的相关工具. 需要在服务器上面有angular nodejs 还有jit的工具 然后 运行时定 ...

  8. sed 删除包含某字符的一行 给包含某字符的一行添加 逗号的简单方法

    今天处理环境折腾死了 方法: #给包含 configdata 的一行 添加 逗号结尾 find . -name "*.json" |xargs sed -i '/configdat ...

  9. 【解决了一个小问题】macbook m1上的docker build问题

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 1. docker hub限制的问题 因为docker b ...

  10. Vue双向数据绑定原理-上

    Vue响应式的原理(数据改变界面就会改变)是什么? 时时监听数据变化, 一旦数据发生变化就更新界面, 这就是Vue响应式的原理. Vue是如何实现时时监听数据变化的 通过原生JS的defineProp ...